[CSS3 advanced] Cool 3D rotating pivoting-ChokCoco

[CSS3 advanced] The Cool 3D rotating pivoting-learn react + webpack before ChokCoco, accidentally passing through the webpack official website and seeing the LOGO on the top will be very interested.

Recently, I felt that my CSS3 was too weak and I wanted to study it in depth. I took this LOGO as the cutting point and studied the related CSS3 attributes. The LOGO animation effect of webpack is not very difficult at first glance. After in-depth understanding, I felt that I had learned a lot about it and made a series of related CSS3 animations.

First go to the demo, and do not focus on compatibility. Please open it in chrome.

The complete code in this article, as well as more CSS3 effects, can be seen on github, and I hope you can click a star.

Well, some people may not be able to open the demo or the page is messy. paste a few images: (the picture is a little big and wait patiently for a while)

3D cube Rotation

3D view photo wall

Skip note

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

In fact, the effects of CSS3 are really powerful. The above effects are pure CSS implementation. I personally feel that the more I study CSS, the more I feel that I do not understand CSS. But then again, these effects are not very useful in practical scenarios, however, as a frontend with a pursuit, I think it is necessary to take a good look at these attributes.

Therefore, this article will focus on the following:

• Transform-style: preserve-3d 3D effect
• Perspective and perspective-origin 3D line of sight, perspective/depth of field effect
• CSS3 filter CSS3 filter
• Transparent, radial-gradient transparency and gradient

Transform-style

To use CSS3 to implement 3D effects, the most important thing is to use the transform-style attribute. Transform-style has only two values available:

// Syntax: transform-style: flat | preserve-3d; transform-style: flat; // default, the child element will not retain its 3D position transform-style: preserve-3d; // The child element retains its 3D position.

When we specify a container's transform-style property value as a preserve-3d, the descendant element of the container will have a 3D effect, which is a little abstract, that is, after the current parent container has set the preserve-3d value, its child element can perform 3D deformation operations relative to the plane where the parent element is located.

When the parent element is configured with transform-style: preserve-3d, you can perform 3D deformation operations on child elements, 3D deformation and 2D deformation can be the same, use the transform attribute to set, alternatively, you can perform the following operations on element variants through a function or a three-dimensional matrix:

1. Use translateX (length), translateY (length), and translateZ (length) for 3D displacement operations. Like 2D operations, perform displacement operations on elements, it can also be merged into translate3d (x, y, z;

2. Use scaleX (), scaleY (), and scaleY () for 3D scaling. You can also combine them into scale3d (number, number, number;

3. Use rotateX (angle), rotateY (angle), and rotateZ (angle) to perform 3D Rotation. You can also combine them into rotate3d (Xangle, Yangle, and Zangle.

For API learning, I suggest you go to the source to check whether it is suitable for consuming others' summary, transform-style API.

The 3D coordinate axis, the so-called three axes around the X, Y, and Z axes, is not difficult. If space is hard to imagine, try using the API, turn around each axis to understand:

After learning about it, we can build a cube based on what we mentioned above. Let's take a look at how to get a cube step by step.

1. Prepare six squares

This is easy to understand, cube six faces, first use p to make 6 faces, wrapped under the same parent container, parent container set transform-style: preserve-3d, in this way, we can perform 3D transformation on the six faces. To facilitate the demonstration, I will use six faces of different colors:

The figure above shows that there are six faces. Of course we need to set the six square p as absolute positioning and overlap them together. This should be the case and we can only see one face:

2. Simple transformation of the parent container

To make the final result look good, we need to first transform the parent container and use the rotate attribute mentioned above to change the angle of the container:

.cube-container{    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);    transform: rotateX(-33.5deg) rotateY(45deg);}

Then, after the conversion, the following figure is obtained:

Well, at this time, the six p faces are still overlapped.

3. Perform 3D transformation on each plane

The next step is to perform a 3D transformation on each plane. The rotate can be used to rotate the p plane, and the translate can be used to translate the p plane. Remember that we are transforming in a three-dimensional space, turn around, we may get this shape:

After calculating the Rotation Angle and offset distance, the last six faces can be perfectly combined into a cube! For better results, I added some transparency to each side and finally got a complete Cube:

To have a more stereoscopic effect, we can adjust the Rotation Angle of the parent container to make the rotation look more stereoscopic:

So far, a 3D cube is complete. At the time of writing this article, this part should have ended. But when I wrote it, I suddenly burst into a whimsy. Since the cube can be (a cube), then it is just a triangle, should the positive ry and even the sphere be made?

Well, I did not hold down my mind and immediately tried it. Finally, I made the following two:

I will not discuss in detail how to get these two items step by step. If you are interested, you can go to my github to check the source code, or directly discuss with me and briefly discuss the ideas:

Positive triangle

Like a cube, we need to prepare four triangles first (We will explain in detail how to use CSS3 to create a triangle p). Note that the four triangles should overlap, then, three of them are rotated 70.5 degrees along the center of the three edges (the angle between the positive surface and the positive surface) to obtain a positive triangle.

Note that the rotation of 70.5 degrees along the center of the three edges means that each graph is positioned at the center of rotation, that is, the transform-origin attribute, which allows us to set the base point position of the element to be rotated.

Sphere

The Animated animation effects added to the GIF above Look Like A Sphere Moving. In fact, only four p S are used, and each p uses border-radius: 100% to set it to a circle, then, based on the center point, each circular p rotates different angles around the Y axis, and then the entire circular container moves around the Y axis. This effect can be achieved.

Perspective and perspective-origin 3D line of sight, perspective/depth of field effect

To continue with 3D, the following attributes are persepective and perspective-origin.

Persepective

// Syntax perspective: number | none;

Perspective sets the distance of a three-dimensional perspective for an element. It only acts on the descendant of the element, not the element itself.

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

If you set perspective, you will see the effect in three dimensions.

Perspective-origin

Perspective-origin indicates the base point position of the 3D element perspective. The default perspective center is the element of the perspective in the container, not the midpoint of its child element, that is, perspective-origin: 50% 50%.

// Syntax 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 in CSS3 3D transformation is in front of the browser.

It is always hard to understand. Using the cube experiment we made above, I set the Cube's side length to 50 px. Here we set the cube container cuber-inner's persepective to 100 px, perspective-origin remains the default value:

-webkit-perspective-origin: 50% 50%;perspective-origin: 50% 50%;-webkit-perspective: 100px;perspective: 100px;

The above setting is equivalent to viewing the cube with a length of PX. The effect is as follows:

By adjusting the values of persepective and perspective-origin, we can see different figures. This is a good understanding. We observe that the angle and distance of an object are constantly changing, the objects we see are also different. Well, imagine that in elementary school texts, Yang Tao and the stars will be easy to understand.

It should be noted that the persepective values are not added to the positive polygon and spherical images above. If you are interested, you can try them out.

3D view photo wall

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

The code will not be posted. This article has been a long time. I just want to talk about the principle and look at the source code if you are interested.

1. Set up a stage, that is, the container of the rotating pictures of the package, set a persepective distance for him, and transform-style: preserve-3d allows future generations to perform 3D transformation;

2. Prepare N images and place them inside the container. The size of N depends on your preferences. The 3D carousel effect of the images is similar to the rotation of pole dancing, so it is centered around the Y axis, we care about the size of the rotateY. Based on the number of images we add, we will use a 360 ° circle to divide each image, that is to say, let each image rotate the fixed angle around the Y axis in order to split it: (the figure below shows the effect, and I adjusted the angle and transparency)

3. At this time, N images must overlap, so the key step here is to use translateZ (length) to make the image translate along the Z axis, that is to say, the use of translateZ can bring the image closer or farther away, because the previous step sets different rotateY () angles for the image, so after setting one translateZ for N images, the image is naturally dispersed in the center of the midpoint, that is:

4. Finally, we use animation to let the stage, that is, to wrap the image container around the Y axis (rotateY), then a 3D photo wall effect similar to a carousel is complete!

Note that the persepective value and the translateZ (length) value of a single image must be greater than the value of translateZ (length, otherwise, it is equivalent to running behind you on the stage, and it is definitely not effective.

I would like to continue

• CSS3 filter CSS3 filter
• Transparent, radial-gradient transparency and gradient

These three CSS3 attributes can make the animation effect more awesome, but I think this article has been very long, and these two attributes are somewhat different from the topic. I plan to take another article and make further exploration.

I have not mentioned anything in this article, but it is very useful for small details. If you are interested, you can learn about it and will discuss it in detail in the following sections:

1,Use the transform3d api instead of the transform api to forcibly enable GPU acceleration to improve website animation rendering performance;

2,Use CSS3 will-change to improve the rendering performance of pages such as scrolling and animation

OK. This article is over now. If you have any questions or suggestions, you can talk a lot about it. The original articles and articles are limited in writing, so you can learn more easily. If there is any error in this article, please kindly advise.

The complete code in this article, as well as more CSS3 effects, can be seen on github, and I hope you can click a star.

The demo in this article stamps me.

If this article is helpful to you, click here for recommendations. It is not easy to write articles.