skew box test

transform and transform inner back

by Laurens Maneschijn

HTML

<div class="bluebox on">
    <div class="whitebox rotatebox">
        <div class="rotateboxinner">
            <p>
                Look at me!<br>
                I'm in a box!<br>
                Really I am!
            </p>
        </div>
    </div>
</div>
(click anywhere to toggle transform (+ transform-origin) stylerules on/off)

CSS

body{
    background-color:#eee;
}

.bluebox{
    padding:100px;
    background-color:#00f;
}
.whitebox{
    text-align:center;
    background-color:#fff;
}

.rotatebox p{
    display:block;
    margin:10px;
    padding:10px;
}

.on .rotatebox{
    text-align:center;
    background:#fff;
/* z-translate -18px will keep box same height as original, but messes with anti-rotation of inner
    transform:perspective(100px) rotateX(10deg) translate3d(0px, 0px, -18px);
*/
    transform:perspective(100px) rotateX(10deg) translate3d(0px, 0px, 0px);
    transform-origin: 50% 0%;
}
.on .rotatebox .rotateboxinner{
	transform:perspective(100px) rotateX(-10deg) translate3d(0px, 2px, 0px);
    transform-origin: 50% 0%;
}

JavaScript

$(document).on('click',function(e){
    $('div.bluebox').toggleClass('on');
});