Javascript 如何使CSS元素扩展到包含div的所有边界之外？

我在这里有一件我想做的事情。正如你所看到的，我在一个div的中心有一个圆圈。当你运行脚本时，它在各个方向上均匀地扩展，直到它到达屏幕的左侧和顶部。我想要的是圆在所有方向上均匀地扩展（通过所有包含的divs边框），这样它就会用红色填充屏幕，但是我不知道如何让它从左上方溢出

这是小提琴：

HTML
jquery
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.circle'）.addClass（'open'）；
}, 2000);
});

---

任何帮助都将不胜感激

您明确地将

放在

（0,0）

页面上

您可以利用

transform

属性，而不是试图找出位置：

div.open {
    transform: scale(50, 50);
}

---

这使得圆在X轴和Y轴上都变大了50倍。元素不会改变位置；它只会变得更大。

我认为更多的是与你的顶部和左绝对的.open css类样式有关

这是一把小提琴的叉子，上面和左边都是-200px：

代码变更：

div.open {
 top: -200px;
 left: -200px;
 width: 1000px;
 height: 1000px; 
}

您的版本正在固定圆的左上角，并向下和向右展开。

您可以使用此选项

transform:translate（-25%，-25%）

演示-
你把它放在一个该死的网站上比我放的好@Pointy！（fiddle-）@GarethHopkins您的也可以，而且它不依赖支持
transform
（虽然它已经依赖于<代码>边界半径<代码>……PoPiBy -我喜欢，但是边缘是锯齿状的，有没有办法让它们平滑？”Graythopks-我上面问过，但我会把它添加到这个线程中。理想的是，我希望TI开始并停留在页面的中间，用于动画。@ GrooveChampion？？我看不到任何JAG。ged edges；你的意思是当它制作动画时？可能取决于浏览器…我会根据要求检查Chrome。@GrooveChampion如果你想用红色填充屏幕，你最后关心的是边缘。很抱歉提醒你，但你的问题中已经说明：
“…这样它就可以用红色填充屏幕。”
Hmmm，有没有办法让它保持其中心位置，然后仍然超出顶部和左侧边界？@GrooveChampion是的，使用
scale（）
（或者只需要一点数学和想象力，如margin left/top:-value；结合W/H递增）是的，请看@Pointy的答案。你不需要JS来触发你的转换，你知道吗？CSS3可以为你处理所有的事情。即使有一个漂亮的缩放动画。探索CSS3动画
div.open {
 top: -200px;
 left: -200px;
 width: 1000px;
 height: 1000px; 
}