CSS3 3D Cube Effect

CSS3 series has been learning for some time, the first article wrote some CSS3 artifice, the original stamp here, but also won more netizens support, in this thanked you, your support is I write the most powerful power ^_^.

So this article, mainly through a 3D cube effect example to learn more about CSS3 transform属性 , the following is the example, plus animation can be rotated yo, isn't it cool? Change the picture of the girl you like, you can dare to tease the sister, haha! 想要查看demo，请点击这里, 3D transform cube effect

First knowledge of transform

As the name implies: transformation. Can think of it can do a lot of things, this attribute has a lot of values, here is a simple list:

• Translate (x, y), TranslateX (x), Translatey (y), Translatez (z), Translate3d, X, Y, Z: Define the position 移动距离 .
• Scale (x, y), ScaleX (x), ScaleY (y), Scalez (z), Scale3d, X, Y, Z: Define the Elements 缩放比例 .
• Rotate (angle), Rotatex (a), Rotatey (a), Rotatez (a), Rotate3d (X,y,z,angle): Defines the elements 旋转角度 .
• Skew (X-angle,y-angle), skewx (angle), skewy (angle): Defines the element 倾斜角度 .

Cognition of 3D Effect

We can see this is a three-dimensional spatial map, not to be frightened by the complexity of the first eye, the careful decomposition is actually very clear: anyway, x axis, y axis, Z axis three direction.

Imagine if you were sitting in front of a computer right now 电脑屏幕中心是原点，原点往右就是X轴正方向，往下就是Y轴正方向，往屏幕前方（也就是往人脸）的方向就是Z轴的正方向了 . The direction of the axis is clear, the above method can be used correctly.

If you think the above explanation is still too dull and abstract, then take a life example to correspond to the three rotate properties (Rotatex, Rotatey, Rotatez):

such as: Gymnastics show-Rotation around the x-axis is rotateX (horizontal bar is the x-axis)

such as: Pole dance performance-rotation around the y-axis is rotateY (the steel tube is the y axis)

such as: turntable rotation-around the z axis in the rotation is rotateZ (imagine a rope from the center of the turntable through, the picture is not good to find = =)

Perspective Property

Perspective's Chinese meaning is: perspective, Perspective! This property is used to activate a 3D space.

When you define the perspective property for an element, its child elements get a perspective effect (the element that uses the 3D transform). So generally the perspective attribute is applied to the parent element, which we can call the parent element 舞台元素 .

It may still be difficult to understand the explanation, but let's use the example to speak:

As can be seen, DIV1 is the parent element of DIV2, beginning we give div2 elements to increase the rotation transform:rotateX(50deg) , only feel div2 in the plane was ' compressed ', no 3D effect, and then when we give the parent element Div1 increase perspective: 150px; , immediately can see 3D effect, Feel the magic of his place.

另外，perspective的取值也一直是个谜，经过我的多次查阅和测试，得出了一下几个结论：

• If the value is None or not set, there is no 3D space.
• The smaller the value, the more obvious the 3D effect is, and the closer your eyes are to true 3D.
• Looks like when the value is the width of the element, the visual effect is better.

Transform-style

Transform-style specifies how nested elements are rendered in 3D space.

Transform-style:flat | Preserve-3d

flatis the default value, which indicates that all child elements are rendered in a 2D plane, preserve-3d indicating that all child elements are rendered in 3D space.

Therefore, when we want to achieve some 3D effect, transform-style: preserve-3d it is indispensable. In general, the Declaration is applied to the parent element of the 3D transform's sibling element, which we can call it 容器 .

Transform-origin

The transform-origin is used to change the origin position of the element.

There are many ways to take the value, let's take a look at some of the common ways to do this by using an example (a yellow div in a clockwise rotation of 45deg):

• transform-origin:center(default value, equivalent to: Center center/50% 50%)

• transform-origin:top(equivalent to: Top Center/center top)

• transform-origin:bottom(equivalent to: bottom Center/center bottom)

• transform-origin:right(Equivalent to: Right Center/center right)

• transform-origin:left(equivalent to: Left Center/center left)

• transform-origin:top left(equivalent to: Left top)

• In the same vein, it can also be set to: transform-origin:top right（右上角为原点） , transform-origin:bottom right（右下角为原点） ,transform-origin:bottom left（左下角为原点）

Draw a cube effect

You crossing can't wait, say so much ' nonsense ', this article 重头戏 finally came!

DOM structure

<div class= "Rect-wrap" >//Stage elements, set the perspective, and let its child elements get perspective effects. <div class= "Container" >//Container, set transform-style:preserve-3d, let its child elements render in 3D space <div class= "top Slide" ></div >//Six facets of the cube <div class= "Bottom slide" ></div><div class= "left slide" ></div><div class= " Right slide "></div><div class=" front slide "></div><div class=" back Slide "></div> </div></div>

CSS Code

• For stage elements

  . rect-wrap {position:relative;perspective: 1600px;}

• For containers

  . container {width: 800px; Height: 800px; Transform-style:preserve-3d; Transform-origin: 50% 50% 200px; //Set the origin of the 3d space in the center of the plane and then move the 200px position to the Z axis }

• Each face of a cube

  . Slide {width: 400px; Height: 400px; Position:absolute; //Positioning }

• Cube Top Face

  . Top {left: 200px; Top: -200px; Transform:rotatex (-90deg); Transform-origin:bottom;}

• Cube Bottom Surface

  . Bottom {left: 200px; Bottom: -200px; Transform:rotatex (90deg); Transform-origin:top;}

• Cube to the left

  . Left {left: -200px; Top: 200px; Transform:rotatey (90deg); Transform-origin:right;}

• Right of Cube

  . Right {left: 600px; Top: 200px; Transform:rotatey (-90deg); Transform-origin:left;}

• Cube Front

  . Front {left: 200px; Top: 200px; Transform:translatez (400px); //Cube in front of the screen, so do not rotate, just to the z-axis before moving the distance }

• Behind the Cube

  . Back {left: 200px; Top: 200px; Transform:translatez (0); //After the cube is facing the screen, so no rotation, just move the distance after the Z axis }

  Finally, don't forget to add a piece to each of the different sides, the location of something a little bit more, this cool cube is done.

Add animation

Finally we want this cube to move itself, I define an animation, crossing can try.

@keyframes Rotate-frame {0% {Transform:rotatex (0deg) Rotatey (0deg); }10% {Transform:rotatex (0deg) Rotatey (180deg); }20% {Transform:rotatex (-180deg) Rotatey (180deg); }30% {Transform:rotatex (-360deg) Rotatey (180deg); }40% {Transform:rotatex (-360deg) Rotatey (360deg); }50% {Transform:rotatex (-180deg) Rotatey (360deg); }60% {Transform:rotatex (90deg) Rotatey (180deg); }70% {Transform:rotatex (0) Rotatey (180deg); }80% {Transform:rotatex (90deg) Rotatey (90deg); }90% {Transform:rotatex (90deg) Rotatey (0); }100% {Transform:rotatex (0) Rotatey (0); }}

Finally, this animation is used on the container element of this cube, OK:

. container{animation:rotate-frame 30s linear infinite;}

The code has been uploaded to GitHub. Project code GitHub address, like the children's shoes may wish to point a star Ah! Thank you ~

Summarize

In a word, in the course of my Learning CSS3, I have seen a lot of new features, but also learned how to use, but I want to say is that we have to learn how to use, but also to understand why each line of code produces the corresponding effect, especially for 3D transform , we have to understand from the root 3D空间 , To get a better grasp of the effect that each of its property values can bring.

This article content a little bit more, I recorded this article at the same time on the effect of learning to consolidate an article, or quite happy da. At the same time also hope that you crossing in the future to learn 3D transform the way to play a little role!

CSS3 3D Cube Effect