How to make CSS element go beyond div borders?

Question

I have a JS script that I am doing here. As you can see, I have a circle sitting in the center of the div. When you run the script, it is evenly distributed in all directions until it hits the left and at the top of the screen. I want the circle to be evenly distributed in all directions (through all the contained borders of the div), so that it fills the screen with red, but I don’t understand how to overlap it on the left and top.

here is the fiddle:

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);
});

Any help would be appreciated!

Answer 1

<div> (0, 0) .

, , transform:

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

50 X Y. ; .

Answer 2

, .open css.

-200px : http://jsfiddle.net/ghopkins/3eybkrz1/

:

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

"" .

Answer 3

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

demo - http://jsfiddle.net/UxtJV/714/