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 :
browser compatibility
Lovely tutorial!

could you please detail the browser compatibility ot this example?
- by Georges on 11/24/2014
Not working in IE8
How can working this code in IE8?
- by Francisco on 3/3/2016
Generate GIF
Can we generate GIF for 3D Cube in .net core?
- 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
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :