Rotating 3D CSS cube

13 September 2011

When exploring the CSS3 transform- and transition possibilities, I created these rotating cubes. With plain color, semi-transparent and one with textures. Only one image is used as texture for the crate, but the rest is pure CSS!


This is not really 3D, but the six panes forming a cube are scaled, transformed, skewed and moved to align exactly and resemble a cube. Using the hover state and CSS transitions (at the bottom of the CSS styles) make the cube rotate when hovering.

All the HTML you need to set up a cube:

<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>

And the complete CSS for all versions:

.cube div {
  width: 120px;
  height: 120px;
  -moz-transition: all 400ms ease;  
  position: absolute;
}
.box1 div { left: 75px; top: 50px; }
.box2 div { left: 300px; top: 50px; }
.box3 div { left: 525px; top: 50px; border: 1px solid rgba(0,0,0,1); background: rgba(187,187,187,.5); }
.box4 div { left: 750px; top: 50px; border: 1px solid rgba(0,0,0,1); background: rgba(187,187,187,.5); }
.box5 div {
  left: 75px;
  top: 300px;
  background: url(crate_side.png);
  background-size: 100%;
  border: 1px solid #000000;
}
.box6 div {
  left: 300px;
  top: 300px;
  background: url(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: translate(0%, 100%) scaley(.49) rotate(75deg); }

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


Stay tuned, because I'm working on a new version wich will rotate 360 degrees!

Update 5 september 2012: I updated the sample page to work in webkit and opera browsers too. The code sample above is still only for firefox, but if you view the source of the demo page, i'll get the most recent source.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

4 comments

  1. Gravatar

    How's at

    12 September 2014

    U know who

  2. Gravatar

    Cheese

    12 September 2014

    width: 120px;
    height: 120px;
    -moz-transition: all 400ms ease;
    position: absolute;

  3. Gravatar

    kenneth

    01 June 2013

    nice it will work and correctly but add some -webkit so that it will work on chrome

  4. Gravatar

    Monster Bureau

    23 September 2011

    Hello! This is actually pretty awesome! Love the smooth rotation effect!