Category : Css | Author : Chtiwi Malek | First posted : 8/4/2014 | Updated : 8/15/2014
Tags : css3, cube, box, animation, 3d, html5
Animated 3d Css Cube

Animated 3d Css Cube

3d transformations, translations, rotations and animations are among the newest and coolest CSS techniques you can use to make your website stand out. For this tutorial we are going to develop a simple and nice animated 3d Cube, then add an additional effect to make the cube disassemble on hover and reassemble on mouse out.
 
Since we'll be only using Css3, this will work on browsers that support CSS animations and 3D transforms, also this code is stripped of the vendor prefixes to keep it clean.

The 3D Cube

First let’s take a look at the html markup :
<div class="wrap">
  <div class="cube">
    <div class="front">
      Front side
    </div>
    <div class="back">
      Back side
    </div>
    <div class="top">
      Top side
    </div>
    <div class="bottom">
      Bottom side
    </div>
    <div class="left">
      Left side
    </div>
    <div class="right">
      Right side
    </div>
  </div>
</div>
First lets set the view perspective for the 3d child elements :
.wrap {
  margin-top: 150px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
We have six divs representing the six sides of the cube, theses divs will have an absolute position and are wrapped inside a relative positioned div. which in turn wrapped inside a main div.
.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-color: #000;
  border: solid 1px #eeeeee;
  color: #ffffff;
}
Now we are going to apply a transformation to rotate and translate each side in the 3d space to form our cube :
.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}
Using this same method we can create other simple or more complex 3d shapes like pyramids, cuboids, trapezohedrons ...

Adding a 3D spinning effect

To make the cube spin, we will define an 360° rotation for the cube’s X and Y axis, and make that rotation run and loop infinitely :
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: rotate 20s infinite linear;
}

Let’s explode this

To get our cube disassembled on mouse hover, we will apply a translation to all cube’s sides, each side will move 100px away from the cube :
.wrap:hover .front {
  transform: translateZ(200px);
}

.wrap:hover .back {
  transform: translateZ(-200px) rotateY(180deg);
}

.wrap:hover .right {
  transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}

.wrap:hover .left {
  transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}

.wrap:hover .top {
  transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}

.wrap:hover .bottom {
  transform: rotateX(270deg) translateZ(100px) translateY(100px);
}
Now to get the above translations animated we apply a transition to all the sides of the cube :
.cube > div {
  transition: transform 0.2s ease-in;
}

Have fun

I hope you enjoyed this tutorial and got inspired.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
This is awesome!!!!
Thanks for your great tutorials.
- by gikarasojo on 9/14/2014
Great!
Thanks a lot)it`s great!
- by Irusik on 9/18/2014
Need Help

Can you just please send the .js part??
 
- by Arka Ghosal on 9/19/2014
it's CSS3, there's no javascript in this animation.
- by Chtiwi Malek on 10/15/2014
How to make it move based on mouse movement
How can I make it move with my mouse vs auto rotation?
- by Amy Ling on 11/19/2014
browser compatibility
Lovely tutorial!

could you please detail the browser compatibility ot this example?
- by Georges on 11/24/2014
Great work
Thank you so much for this lesson.
- by Niro on 6/24/2015
Great work!
thank you so much for this lesson.
- by Niro on 6/24/2015
Fantastic Design
So so so .. Beautiful !!
Thanks!
- by Al emran on 8/27/2015
link a cube face
So cool! a question:
how can i select a face of cube and link it to another place?
- by Carlos on 12/16/2015
link buttons
is it possibal to put link buttons inside the cube where when it opens you can click on one of them and it takes you to another page.
- by john on 1/13/2016
a solution for IE10+
here my solution, which works in IE to...
www.joerg-marzinzick.de
- by Jörg Marzinzick on 1/28/2016
Not working in IE8
How can working this code in IE8?
- by Francisco on 3/3/2016
How to put images in?
I works great! Please, how to put images in?
- by mamasan on 5/3/2016
I've done. Ttank you :)
- by Katia ZORZENONE on 5/3/2016
Thank You sorry, amazing tutorial
Thank You sorry, amazing tutorial
- by mamasan on 5/3/2016
finally something that works...
I have tried to do it myself a couple of times but did not work...i did not understand what was missing...i have changed it make my online profile (cv) with links and stops on hover and etc...thanks so much for this sharing your knowledge ...
- by Old Folk on 8/4/2016
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access