如何使CSS元素超出包含div的所有边界？

Question

我有一个JS小提琴，我想在这里做些什么。 如你所见，我有一个圆圈坐在div的中心。 当您运行脚本时，它会在所有方向上均匀消耗，直到它到达屏幕的左侧和顶部。 我想要发生的是圆圈在所有方向均匀扩展（通过所有包含div的边框），以便它用红色填充屏幕，但我不知道如何让它溢出左上方。

这是小提琴：

http://jsfiddle.net/dkarasinski/UxtJV/711/

HTML

<div class="outerwrapper">
    <div class="test">
        <div class="circle"></div>
    </div>
</div>

jquery

$(document).ready(function() {
setTimeout(function() {
$('.circle').addClass('open');
}, 2000);
});

任何帮助，将不胜感激！

Answer 1

我认为这更多地与你的.open css类风格的上下绝对有关。

这是你的小提琴的叉子，上下左右是-200px： http ： //jsfiddle.net/ghopkins/3eybkrz1/

代码更改：

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

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

Answer 2

您明确地将<div>放在页面上的(0, 0) 。

您可以利用transform属性，而不是试图找出位置：

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

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

Answer 3

你可以用它

transform: translate(-25%, -25%);

演示 - http://jsfiddle.net/UxtJV/714/