3D CSS cube

Pure CSS 3D cube animations

by dreamdealer

HTML

<h1>Hover the cubes!</h1>

<div class="cube box1 rotateLeft">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
</div>

<div class="cube box2 rotateRight">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
</div>

<div class="cube box3 rotateLeft">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
    <div class="pane4"></div>
    <div class="pane5"></div>
    <div class="pane6"></div>
</div>

<div class="cube box4 rotateRight">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
    <div class="pane4"></div>
    <div class="pane5"></div>
    <div class="pane6"></div>
</div>

<div class="cube box5 rotateLeft">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
</div>

<div class="cube box6 rotateRight">
    <div class="pane1"></div>
    <div class="pane2"></div>
    <div class="pane3"></div>
</div>

CSS

body {
    font-family: arial;
}
h1 {
    font-size: 30px;   
}
.cube div {
    width: 100px;
    height: 100px; 
    -moz-transition: all 400ms ease;  
    position: absolute; 
}
.box1 div { left: 50px; top: 50px; }
.box2 div { left: 250px; top: 50px; }
.box3 div { left: 450px; top: 50px; border: 1px solid rgba(0,0,0,1); background: rgba(187,187,187,.5); }
.box4 div { left: 650px; top: 50px; border: 1px solid rgba(0,0,0,1); background: rgba(187,187,187,.5); }
.box5 div { 
    left: 50px; 
    top: 250px; 
    background: url(http://img.dreamdealer.nl/dd/crate_side.png);
    background-size: 100%;
    border: 1px solid #000000;
}
.box6 div {
    left: 250px;
    top: 250px;
    background: url(http://img.dreamdealer.nl/dd/crate_side.png);
    background-size: 100%;
    border: 1px solid #000000;
}

.pane1 {
     background: #BBB;   
     -moz-transform: scaley(.49) rotate(50deg);
     z-index: 6;
}
.pane2 {
     background: #AAA;  
     -moz-transform: translate(-38%, 65.5%) scalex(.65) skew(0deg, 21deg);
     z-index: 5;
}
.pane3 {
     background: #DDD;   
     -moz-transform: translate(32%, 68%) scalex(.77) skew(0deg, -17.5deg);
     z-index: 4;
}
.pane4 {  
     -moz-transform: translate(38%, 34%) scalex(.65) skew(0deg, 21deg);
     z-index: 3;
}
.pane5 {   
     -moz-transform: translate(-32%, 31%) scalex(.77) skew(0deg, -17.5deg);
     z-index: 2;
}
.pane6 { 
     -moz-transform: translate(0%, 100%) scaley(.49) rotate(50deg);
     z-index: 1;
}

.rotateLeft:hover .pane1 { -moz-transform: scaley(.495) rotate(75deg); }
.rotateLeft:hover .pane2 { -moz-transform: translate(-48%, 56%) scalex(.25) skew(0deg, 25deg); }
.rotateLeft:hover .pane3 { -moz-transform: translate(13%, 73.5%) scalex(.98) skew(0deg, -7.5deg); }
.rotateLeft:hover .pane4 { -moz-transform: translate(49%, 45%) scalex(.25) skew(0deg, 25.5deg); }
.rotateLeft:hover .pane5 { -moz-transform: translate(-13%, 26.5%) scalex(.98) skew(0deg, -7.5deg); }
.rotateLeft:hover .pane6 { -moz-transform:...