如何使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/