3d transforms - preserve 3d fix in firefox

by Pranab Dey

HTML

<div class="example">
    <h1>Two levels up</h1>
    <div class="perspective">
        <div class="container">
            <div class="cube">
                <div class="front"></div>
                <div class="back"></div>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
                <div class="across"></div>
            </div>
        </div>
    </div>
</div>
<div class="example">
    <h1>Two levels up fixed</h1>
    <div class="perspective">
        <div class="container fixed">
            <div class="cube">
                <div class="front"></div>
                <div class="back"></div>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
                <div class="across"></div>
            </div>
        </div>
    </div>
</div>
<div class="example">
    <h1>One level up</h1>
    <div class="container perspective">
        <div class="cube">
            <div class="front"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="across"></div>
        </div>
    </div>
</div>
<button id="rotate" type="button">Rotate Cubes</button>
<p>Appear the same in WebKit, different in Firefox.</p>

CSS

.perspective
{
    -moz-perspective: 500px;
    -webkit-perspective: 500px;
}

.container.fixed {
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; /** fixes non transitive 3d from parent and child **/
    transform-style: preserve-3d;
}

.container, .perspective
{
    width: 100px;
    height: 100px;
}

.example
{
    margin: 30px;
}

h1
{
    margin-bottom: 1em;
}

.cube
{
    -moz-transform-style: preserve-3d;
    -moz-transition: all ease 1500ms;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all ease 1500ms;
    position: relative;
    width: 100px;
    height: 100px;
    
}

/* Setup the Cube faces */

.front, .back, .left, .right, .top, .bottom, .across
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    -moz-backface-visibility: visible;
    -webkit-backface-visibility: visible;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-size: 30px;
    opacity: 0.8;
}

.front
{
    background: red;
}

.bottom
{
    background: black;
    -webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0, 50px, 50px);
    -moz-transform: rotate3d(1,0,0,-90deg) translate3d(0, 50px, 50px);
}

.top
{
    background: green;
    -webkit-transform: rotate3d(1,0,0,90deg) translate3d(0, -50px, 50px);
    -moz-transform: rotate3d(1,0,0,90deg) translate3d(0, -50px, 50px);
}

.right
{
    background: blue;
    -webkit-transform: rotate3d(0,1,0,90deg) translate3d(50px, 0px, 50px);
    -moz-transform: rotate3d(0,1,0,90deg) translate3d(50px, 0px, 50px);
}

.left
{
   background: orange;
    -webkit-transform: rotate3d(0,1,0,-90deg) translate3d(-50px, 0px, 50px);
    -moz-transform: rotate3d(0,1,0,-90deg) translate3d(-50px, 0px, 50px);
}    

.across
{
   background: pink;
   -webkit-transform: translate3d(0, 0, -100px) translate3d(0, 0, 50px) rotate3d(0,1,0,90deg) rotate3d(1,1,0,-45deg);
    -moz-transform: translate3d(0, 0, -100px) translate3d(0, 0, 50px)...

JavaScript

$(function() {
    var toggle = false;
    
    $('#rotate').click(function(event){
        event.preventDefault();
        var rotate = toggle ? 0 : -180;
        toggle = !toggle;
        $('.cube').css({
            '-moz-transform': 'rotateY('+rotate+'deg)',
            '-webkit-transform': 'rotateY('+rotate+'deg)'
        });
    });
});