CSS 3D - preserve-3d

by Bartek Szopka

HTML

<figure class="scene">
    
    
    <div class="cube">
        <div class="face">front</div>
        <div class="face">back</div>
        <div class="face">left</div>
        <div class="face">right</div>
        <div class="face">top</div>
        <div class="face">bottom</div>
    </div>
    
    <figcaption>transform-style: <b>flat</b>;</figcaption>
</figure>

<figure class="scene preserve-3d">
    
    
    <div class="cube">
        <div class="face">front</div>
        <div class="face">back</div>
        <div class="face">left</div>
        <div class="face">right</div>
        <div class="face">top</div>
        <div class="face">bottom</div>
    </div>
    
    <figcaption>transform-style: <b>preserve-3d</b>;</figcaption>
</figure>

SCSS

@mixin pfx( $property, $value ) {
    -webkit-#{$property}: $value;    
       -moz-#{$property}: $value;
        -ms-#{$property}: $value;
         -o-#{$property}: $value;
            #{$property}: $value;
}

@mixin transform( $value ) {
    @include pfx( transform, $value );
}

@mixin transform-style( $value ) {
    @include pfx( transform-style, $value );
}

@mixin perspective( $value ) {
    @include pfx( perspective, $value );
}

@mixin backface-visibility( $value ) {
    @include pfx( backface-visibility, $value );
}

$face-size: 150px;

body { width:600px }

figure {
    margin: 10px 0 10px 10px;
    border: 1px solid #999;
    position: relative;
    width: 290px;
    box-sizing: border-box;
    float: left;
    padding: 5px;
    
    figcaption {
        clear: both;
        display: block;
        background: rgba(255,255,255,0.8);
        font-family: monospace;
        font-size: 14px;
    
        z-index: 100;
        padding-top: 10px;
    }
}

.cube {
    margin: 65px;
    width: $face-size;
    height: $face-size;

    @include transform( perspective(1000px) rotateX(-30deg) rotateY(-40deg) );    

    .face {
        position: absolute;
        opacity: 1;

        width: $face-size;
        height: $face-size;

        font-size: 50px;
        line-height: $face-size;
        text-align: center;
        font-family: sans-serif;
        color: #F4F4F4;
        
        @include backface-visibility( hidden );
    
        &:nth-child(1) { background: rgba(255,153,  0,1); @include transform( translate3d(0,0, $face-size/2) rotateY(  0deg) ); }
        &:nth-child(2) { background: rgba(102, 51,255,1); @include transform( translate3d(0,0,-$face-size/2) rotateY(180deg) ); }
        &:nth-child(3) { background: rgba(255,  0,  0,1); @include transform( translate3d(-$face-size/2,0,0) rotateY(-90deg) ); }
        &:nth-child(4) { background: rgba( 51,255,  0,1); @include transform( translate3d( $face-size/2,0,0) rotateY( 90deg) ); }
        &:nth-child(5)...