Sponsored

Not the solution you were looking for?

We’ll help you out!

Create an Animated Rotating 3D Cube using Pure CSS Techniques!

Everyone might have heard about CSS animations, transitions, transformations, perspective etc…I thought of creating a simple tutorial based on those known CSS techniques. The idea is to create a rotating 3D cube using pure CSS properties. However, one might ask me what are the advantages of using CSS animations over JavaScript. Of course there are few to point out – mainly, CSS animations are simple and easy to create. Secondly, the animations doesn’t consume much of your computing resource and importantly, the animation sequences are left to the browser – thus allowing the browser to optimize the performance and efficiency.

Main Components of CSS Animation

CSS Animations are based on two main components – a style that describes the animation (using animation property) and a keyframe (using @keyframes at-rule) that defines the start and stop of the animation’s style. Of course, the keyframe is responsible for intermediate transitions, transformations during its journey from start till the end.

Well, we are supposed to speak about an Animation of 3D cube isn’t? Lets try doing it now.

Create the sides of the Cube

The first step is to create the sides of the cube – of course, the six sides are front, back, top, bottom, left and right. This step is not a rocket science isn’t? You know that we are going to use the favorite block element <div> for each side and then wrap all of them to call it as cube (of course cube is the parent div of all the side divs). Finally, the entire cube markup is wrapped by the main div (parent of all). So, the structure goes as the below picture.

CSS Perspective property defines the placement (in pixels) of an 3D element from the view. Did I confuse? Perspective property helps you change the perspective of how the cube is viewed. Generally, perspective property is defined for the PARENT element, in order to give perspective to the CHILD elements. For example, in our case the <div class=”wrap”> is the PARENT and <div class=”cube”> is the 3D CHILD element. So the perspective should be defined for class “wrap” and the one that gets the view is “cube“. Hope I didn’t confuse now?

The transform property allows you to rotate, scale, move, skew 2D or 3D elements. Now we have transformed the simple div’s (sides) to resemble a cube.

Animate the Cube

We have the cube ready, but lets animate it to view the cube properly. Moreover, that’s the goal of this tutorial as well. So lets do it.

If you go to the second para of this article, you will understand that there are two main components that allows you to create an animation – style the animation and use @keyframes rule to define the start and end point. In our example, the cube is not going to do any zig-zag dancing, but stays at one point and rotates to 360 degrees. It means, the from position at the@keyframes will have the transform property set to 0deg for both X axis and Y axis and the to position@keyframes will have the transform property set to 360deg for both the X axis and Y axis.

Note: The demo has not been tested on all browsers, in case if it fails to work on a specific browser then you may have to add the vendor specific -prefix to certain css properties like transform, @keyframes, perspective etc...