Category : Css | Author : Chtiwi Malek | First posted : 8/4/2014 | Updated : 9/26/2017
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 class="back">
      Back side
    <div class="top">
      Top side
    <div class="bottom">
      Bottom side
    <div class="left">
      Left side
    <div class="right">
      Right side
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
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
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 !!
- 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...
- 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
<a href=""> sewa villa 3 kamar di puncak</a>
<a href=""> sewa villa di puncak harga 500 ribu</a>
<a href=""> sewa villa di puncak dibawah 1 juta</a>
<a href=""> sewa villa 3 kamar di puncak</a>
<a href=""> sewa villa di cipanas</a>
<a href=""> sewa villa di puncak</a>
<a href=""> villa murah di puncak</a>
<a href=""> sewa villa di puncak</a>
<a href=""> cara booking villa puncak</a>
<a href=""> tips sewa villa puncak</a>
<a href=""> sewa villa green apple cipanas</a>
<a href=""> sewa villa di puncak harga 500 ribu</a>
<a href="">villa puncak murah</a>
<a href="">villa jepang</a>
<a href="">green apple puncak</a>
<a href="">sewa villa di puncak ada kolam renang</a>
<a href="">sewa villa di puncak 4 kamar</a>
<a href="">sewa villa di puncak</a>

<a href=""> service hp cianjur</a>
<a href=""> service hp di cianjur</a>
<a href=""> service hp di cianjur</a>
<a href=""> service hp cianjur</a>
- by asasa on 9/13/2017
Need to more
Actually i made it clickable on every face. But i dont know how put the next animation after clicking any face. What i need is The Face shud go one by one and the requested page need to load.
- by vargis on 9/28/2017
Wow, super awesome and no Javascript!
Super awesome and there is no Javascript, you've got to be kidding me!
- by Justin on 1/15/2018
- by Purushotam on 3/3/2018
How can we get back side shown Front side
Here you can clearly see that back side never come to front side. can anyone tell me how to do that?
- by jeet on 6/28/2018
Animated 3d Css
Animated 3d Css Cube is very unique and interesting, I like 3d animation very much
<a href=""> run 3 </a>
- by Acacia on 7/2/2018
3d Cube to gif
I have applied your code to generate 3D cube but now i want to generate gif of that 3d cube. so how can we do that. can you please reply me ?
- by Jaydip on 7/3/2018
Generate GIF
Can we generate GIF for 3D Cube in .net core?
- by Sunil on 7/10/2018
Generate GIF
Can we generate GIF image for 3D Cube in Dot NET?
- by Sunil on 7/10/2018
where can i put this code or zip file in my wordpress theme
where can i put this code or zip file in my wordpress theme
- by Sudharshana Kote on 1/7/2019
Add to WordPress theme
What amazing work, and resources. Thank you so much!
- by Lauran on 1/28/2020
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :