The first CSS3 3D property entry was sniffed at by others, ten thousand damage value, well, you want the panoramic view. (Haha, hitting is the ladder of progress!) . This time, let’s take a scene that everyone loves to show off their skills with 3D attributes, the rotating cube. Some people claim that this animation simply represents the madness of CSS3. No, no, it is the peak. I just want to yell when I’m done. You’re right! From plane dynamic effect to three-dimensional dynamic effect is… The six sides of the cube have to do a full six different Settings, so those playing octahedron, dodecahedron,… Wait a minute. Big “take.” Others do cube 3 d animation, see a few, almost all the < div >, well, I use the < SVG > to do it, the reason, the back, of course, if failed, automatic, please ignore this sentence.

1. Stand up

Inevitably, you have to start with a basic graph. Wrong wrong wrong, is based on object, three-dimensional things anyway, is a need, just call. There are basically two ways to do this, but let’s do an intuitive one.

Looking at the picture above, I’ve laid out the six sides of the cube, the one in the upper right is the back. At this point, let’s say the cube is straight in front of your line of sight, and there you have the faces, and now I need to fold them up, like a cardboard box, to form a cube. Take a look at the DOM structure.

<div class="stage">
<div class="content">
<svg   id="cubic1" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic2" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic3" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic4" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic5" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic6" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
</div>
</div>Copy the code

Very simple, I defined two containers, one is the stage and the other is the content wrapped around the cube. In the content, there are 6 SVGS, and each SVG only has a simple rectangle rect. My goal is to make content change 3D dynamically in stage.

The CSS is defined as follows:

.stage {width: 800px; height: 600px; background:#e5fffb; perspective:1000px; }
.content{transform-style: preserve-3d}
#cubic1{fill:#f29a76}
#cubic2{fill:#61BFBE}
#cubic3{fill:#BADDD6}
#cubic4{fill:#FFB5BA}
#cubic5{fill:#866667}
#cubic6{fill:#E25D6E}SVG {position: absolute; top:200px; left:300px; width:200px; height:300px}Copy the code

The 6 SVG are all 200 in width and 200 in height. Although the rectangle

inside is also the same size, there is no uniform definition, because we want to try to define different animation properties for each SVG later. The container placement relationship is shown as follows:

Currently, the six sides are superimposed by the position property, so move each square to its position before folding. Moving CSS properties is simple. Cubic1, the plane facing us, does not need to be moved. Add transform: Translate

#cubic2{fill:#61BFBE; Transform: translateZ(-200px)} /* Move the back 200px away from the screen */
#cubic3{fill:#BADDD6; Transform: translateY(-200px)} /* Top straight up 200px*/
#cubic4{fill:#FFB5BA; Transform: translateX(200px)} /* Right side horizontal to right 200px*/
#cubic5{fill:#866667; Transform: translateY(200px)} /* Bottom vertical down 200px*/
#cubic6{fill:#E25D6E; Transform: translateX(-200px)} /* Left level left 200px*/Copy the code

The effect after the move is like this (idle also idle, I made the move effect) :




transform-origin: center left 

#cubic3{fill:#BADDD6; transform: translateY(-200px) rotateX(90deg) ; transform-origin: bottom center; }
#cubic4{fill:#FFB5BA; transform: translateX(200px) rotateY(90deg); transform-origin: center left; }
#cubic5{fill:#866667; transform: translateY(200px) rotateX(-90deg); transform-origin:top center; }
#cubic6{fill:#E25D6E; transform: translateX(-200px) rotateY(-90deg); transform-origin: center right; }Copy the code

When done, it looks like this:

(Are you kidding me? A flat surface is a cube… !). Don’t worry, I knew you were going to say that, so I’m going to show you how it works in motion:

Animation should be here!! Should have animation!! Should have animation!! (I forgot the recording screen, the sky is rolling)

Do you believe me? It’s actually a cube, the real thing, except we didn’t set the perspective position for the outermost container (the 3D morphed stage), so you only see one side by default. Here we go. If I adjust the opacity and change the perspective origin, it looks like this. Yo, here comes the cube.



transform-origion



perspective-origin:80% 80%



perspective-origin:20% 20%







translateZ

Method 2 is more optimized because the definition of six cubic is simplified as follows:

#cubic1{fill:#f29a76; transform:translateZ(100px); }
#cubic2{fill:#61BFBE; transform:translateZ(-100px); }
#cubic3{fill:#BADDD6; transform:rotateX(90deg) translateZ(-100px)}
#cubic4{fill:#FFB5BA; transform:rotateY(-90deg) translateZ(100px)}
#cubic5{fill:#866667; transform:rotateX(-90deg)translateZ(-100px)}
#cubic6{fill:#E25D6E; transform: rotateY(90deg) translateZ(100px)}Copy the code

2. Spin again

Now that the basic pieces are in place, let’s get the cube moving. The cube is hard to understand, but we put it in a Content

container when we did it, so let’s just do some transformations on that container. In terms of which way to get the cube, it’s arbitrary here. I used two. Let’s start with the simplest CSS that rotates around the Y-axis as follows: 
@keyframes content{
to{transform: rotateY(360deg)translateZ(20px)}
}
.content{transform-style: preserve-3d; animation:content 2s linear both infinite; }Copy the code

Effect:

Stop here for a moment and put the rest into another post, so I can think about what kind of effects 3D can do. Such as update.