Pure CSS3 implements a rotating 3D cube box, css33d cube box

Pure CSS3 implements a rotating 3D cube box, css33d cube box
Introduction

On the Netease front-end micro-professional courses, there is an extra-curricular homework is to implement a 3D rotating cube, it took some time to do it, but also some meaning, write a simple tutorial for everyone to learn.
First put the final effect to be implemented
Note: The code is normal in chrome 43.0.2357.124 m and is not tested in other browsers.

Step 1. Place each plane on a two-dimensional plane

When you were a child, you may have played a "stacked box", that is, to draw a box on a piece of paper and then crop a box like this:

Let's take a look at this idea. Here we also use this idea to set each plane of the cube on the plane, and then rotate each plane to form a cube.
For the effect, see code-1.
The above code is slightly different, that is, the front and back are stacked together. This can be understood in this way. We first cut the front and back, and put them on the back, at the end of the stacked box, move the vertical screen in front of the screen out to complete the fight. Why? As a result, there are fewer front faces and fewer CSS3 styles to be written.

2. Create a cube box on a three-dimensional Rotating Plane

The most critical step is to use the CSS3 attribute to implement the rotation of each plane. Here we provide a core code for "Left" and "Front:

. Left {transform: rotateY (90deg); // Rotate 90 degrees transform-origin: right along the Y axis; // use the right border of the rectangle as the Y axis }. front {transform: translateZ (150px); // move 150px out of the vertical screen}

For details about rotateX, rotateY, rotateZ, and translateZ attributes of rotating and moving, refer to Zhang xinxu's blog
And so on, we can rotate all the sides, and the cube box has been combined! For the final result, see Code 2.
Oh, there is also a line of code worth mentioning here

. Stage {perspective: 800px; // translated into depth of field or line of sight}

A netizen gave a good example to illustrate the concept of perspective.

3. Add a cube rotation Animation

After the static box is complete, the next step is to add a rotation animation. The main idea is to turn the container div that includes the box, and the box will be followed. The following is an example code that is converted along the Z axis.

@ Keyframes rotate-frame {// defines the animation key frame 0% {transform: rotateZ (0deg);} 100% {transform: rotateZ (360deg );}}. container {transform-style: preserve-3d; // elements in the container are converted together with the container to animation: rotate-frame 3 s infinite linear; // apply the Key frame animation}

For the effect, see Code 3.

4. Add some materials

This is a bit silly, and finally it is converted along the X axis and along the Y axis, mainly the changes in key frame settings.

@ Keyframes rotate-frame {0% {transform: rotateX (0deg);} 25% {transform: rotateX (180deg);} 50% {transform: rotateX (360deg) rotateY (0deg );} 75% {transform: rotateX (360deg) rotateY (180deg);} 100% {transform: rotateX (360deg) rotateY (360deg );}}. container {transform-origin: 50% 50% 75px; // Changes the rotation reference plane}

Final result code-4

Summary

In this example, we can get familiar with the attributes related to CSS3 transform and create a small cube. If there are any deficiencies, please correct them.
You can't help but think about it again. Can you create a 3D cube, similar to playing in real life? It makes sense to rotate all aspects or even automatically solve the cube. You have time to try it ~

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.