Shulou(Shulou.com)06/03 Report--

CSS3 how to make cool 3D rotation perspective, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Cube 3D rotation

3D perspective photo wall

Leaping notes

Maybe the above effect is a piece of cake for those who are proficient in CSS3. The purpose of writing this article is also a process of my own learning and accumulation. Those who are interested can read on together.

In fact, the CSS3 effect is really powerful, and the above effects are all pure CSS implementations. The more you go deep into the study of CSS, the more you feel that you don't understand CSS, but then again, the practical scenarios of these effects are not big, but as a front-end to pursue, I still think it is necessary to have a good understanding of these attributes.

So the next part of this article is about:

Transform-style:preserve-3d 3D effects perspective andperspective-origin 3D sight distance, perspective / depth of field effects CSS3filter CSS3 filters transparent, radial-gradient transparency and gradient

Transform-style

To use CSS3 to achieve 3D effect, the most important thing is to use the transform-style attribute. There are only two values for transform-style to choose from:

CSS Code copies content to the clipboard

/ / Syntax:

Transform-style: flat | preserve-3d

Transform-style: flat; / / by default, child elements will not retain their 3D positions

The transform-style: preserve-3d; / / child element retains its 3D position.

When we specify the transform-style attribute value of a container as preserve-3d, the descendant elements of the container will have a 3D effect, which is a bit abstract, that is, after the current parent container sets the preserve-3d value, its child elements can perform 3D deformation operations relative to the plane of the parent element.

When transform-style:preserve-3d is set for the parent element, you can perform 3D transformations on the child elements. 3D deformations are the same as 2D deformations, which can be set using the transform attribute, or can be transformed through established functions or 3D matrices:

1. Use translateX (length), translateY (length) and translateZ (length) to perform 3D displacement operations. Like 2D operations, element displacement operations can also be combined into translate3d (xmemyjinz).

2. Use scaleX (), scaleY (), scaleY () for 3D zoom operation, or merge it into scale3d (number,number,number).

3. Use rotateX (angle), rotateY (angle), rotateZ (angle) for 3D rotation operation, and can also be combined into rotate3d (Xangle,Yangle,Zangle).

For the study of API, I suggest to go to the source to see, do not be satisfied with the summary of others, transform-style API.

In particular, the 3D coordinate axis, the so-called three axes around the X, Y and Z axes, is not difficult. If you find it difficult to imagine in space, try to follow the API and turn around each axis.

After understanding, then relying on the above, in fact, we can already make a cube. As the saying goes, true knowledge comes from practice. Let's take a look at how to get a cube step by step.

1. Prepare six squares

It is easy to understand that six faces of a cube are first made with div and wrapped under the same parent container, and the parent container is set to transform-style:preserve-3d, so that the six faces can be transformed in 3D. For convenience of demonstration, I use six faces with different colors:

The figure above shows that there are 6 faces. Of course, we have to set the 6 square div to absolute positioning and overlap each other, so it should be like this, and only one face can be seen:

2. The parent container makes a simple transformation

In order to look good in the end, we need to transform the parent container and use the rotate attribute mentioned above to change the angle of the container:

CSS Code copies content to the clipboard

. cube-container {

-webkit-transform: rotateX (- 33.5deg) rotateY (45deg)

Transform: rotateX (- 33.5deg) rotateY (45deg)

}

So, after the transformation, you get a figure like this:

Well, at this time, the six div faces are still overlapping.

3. Do 3D transformation to each face

The next step is to transform each face in 3D, using rotate to rotate the div plane and translate to translate the div plane, and remember that now we are transforming, turning and turning in three-dimensional space, and we may get a shape like this:

Calculate the rotation angle and offset distance, and finally the above six faces can be perfectly assembled into a cube! For better results, I added some transparency to each face, and finally got a complete cube:

In order to have a more three-dimensional sense, we can adjust the rotation angle of the parent container to rotate the angle that looks more three-dimensional:

At this point, a 3D cube is complete. When I was writing this article, I should have finished this piece here, but when I was writing here, I suddenly thought that since a cube can be (regular hexahedron), then regular tetrahedron, regular octahedron and even sphere can also be made, right?

Well, without holding back my restless heart, I immediately tried it, and finally made the following two:

Instead of discussing in detail how to get these two step by step, if you are interested, you can go to my github to see the source code, or discuss and communicate with me directly and simply talk about ideas:

Regular tetrahedron

Like the cube, we first have to prepare four triangles (below we will talk in detail about how to use CSS3 to make a triangular div), note that the four triangles should overlap, and then rotate three of them along the center of the three sides by 70.5 degrees (the angle between the faces of the regular tetrahedron), you can get a regular tetrahedron.

Notice the sentence that rotates 70.5 degrees along the center point of the three sides, which means that each shape needs to locate the center of rotation once, that is, the transform-origin attribute, which allows us to set the base point position of the rotation element.

Sphere

The above GIF diagram because of the addition of animation animation effect, looks like a sphere in motion, in fact, only 4 div are used, each div is set as a circle using border-radius:100%, and then based on the center point, each circular div rotates at a different angle around the Y axis, and then let the whole circular container move around the Y axis, you can get such an effect.

Perspective andperspective-origin 3D sight distance, perspective / depth of field effect

Moving on to 3D, the next attributes are persepective and perspective-origin.

Persepective

CSS Code copies content to the clipboard

/ / grammar

Perspective: number | none

Perspective sets the distance of 3D perspective for an element, acting only on the descendants of the element, not on the element itself.

To put it simply, when the element does not set perspective, that is, when perspective:none/0, all descendant elements are compressed on the same two-dimensional plane, there is no depth of field effect.

If you set perspective, you will see the 3D effect.

Perspective-origin

Perspective-origin represents the base point of the perspective of a 3D element, and the default perspective is centered on the element where the container is the perspective, rather than the midpoint of his descendant element, that is, perspective-origin: 50%.

CSS Code copies content to the clipboard

/ / grammar

Perspective-origin: x-axis y-axis

/ / x-axis: defines the position of the view on the x-axis. Default value: 50%

/ / y-axis: defines the position of the view on the y-axis. Default value: 50%

It is worth noting that the perspective point of perspective in the CSS3 3D transformation is in front of the browser.

It is always difficult to understand. Using the cube we made above, I set the side length of the cube to 50 px. Here, the persepective of the cube container cuber-inner is set to 100 px, and the perspective-origin is kept at the default value:

CSS Code copies content to the clipboard

-webkit-perspective-origin: 50%

Perspective-origin: 50%

-webkit-perspective: 100px

Perspective: 100px

The above setting, which is equivalent to standing outside the length of the 100px to look at the cube, the effect is as follows:

By adjusting the values of persepective and perspective-origin, you can see different graphics, which is easy to understand. The angle and distance from an object are constantly changing, and the objects we see are also different. Well, imagine the primary school text, carambola and stars.

Need to point out that I above several regular polyhedron graphics and spherical graphics are not added persepective value, interested can add a try to see the effect.

3D perspective photo wall

Going back to the 3D photo wall I posted at the beginning of the article, using transform-style: preserve-3d and persepective, you can make a good 3D photo wall rotation effect.

The code is not posted, this article has been very long, just a simple talk about the principle, interested to pick the source code to have a look.

1. Set up a stage, that is, a container for rotating pictures, set a persepective distance for him, and transform-style: preserve-3d so that future generations can make 3D transformations.

2. Prepare N pictures to be placed inside the container. The size of N depends on your preference. The 3D merry-go-round effect of the picture is similar to the movement of pole dance rotation, so it revolves around the Y axis. We are concerned about the size of rotateY. According to the number of pictures we add, we divide each picture equally with a circumferential angle of 360 °, that is, let each picture rotate around the Y axis at a fixed angle in turn: (the following figure shows the effect. I adjusted the angle and transparency)

3. At this time, the N images must overlap each other, so the key step here is to use translateZ (length) to translate the image along the Z axis, that is, you can use translateZ to make the image closer or farther away from us, because the previous step set a different rotateY () angle of the image, so after N images set a translateZ, the image will naturally spread around the center of the center, that is:

4. Finally, using animation, we let the stage, that is, the container wrapped in the picture, rotate around the Y axis (rotateY), and a 3D photo wall similar to the merry-go-round is finished!

One thing to note here is to set the persepective value and a single picture translateZ (length) value, persepective must be larger than translateZ (length) value, otherwise it is equivalent to the stage running behind you, must not see the effect.

After reading the above, have you mastered how CSS3 makes cool 3D rotation perspective? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.