"CSS3 advanced" cool 3D rotation perspective

Before learning React+webpack, accidentally passing through Webpack official website, see the LOGO on the top, it is very interested.

Recently feel oneself CSS3 too weak, want to study in depth, so with this LOGO for the cut-in, study a bit about the related CSS3 properties. Webpack LOGO animation effect at first glance is not difficult, in-depth understanding, feel inside actually a lot of knowledge, oneself toss some, do a series of related CSS3 animation effect.

First on the demo, do not focus on compatibility, please open with chrome.

The complete code of this article, as well as more CSS3 effects, can be seen on my github and hopefully you can point to a star.

Well, some people may not be able to open the demo or the page is disorderly, paste a few: (the picture is a bit big, patience wait for a while)

Cube 3D Rotation

3D perspective Photo Wall

jumping notes.

Perhaps the above effect on the mastery of CSS3 is a piece of cake, writing the purpose of this article is also my own learning to accumulate a process, interested can be looked down together.

In fact, CSS3 effect is really very powerful, the above effect is purely CSS implementation, the more deeply personal feeling of CSS learning, the more I feel that they do not understand CSS, but then back, the practical scenario of these effects is not big, but as a pursuit of the front-end, I think it is necessary to get a good look at these properties.

So the next thing to say about this article is:

• Transform-style:preserve-3d three-dimensional effect
• perspective and perspective-origin 3D viewing distance, perspective/depth of field effect
• CSS3 Filter CSS3 Filter
• Transparent, radial-gradient transparency and gradients

Transform-style

To achieve 3D effect with CSS3, the most important thing is to use the Transform-style attribute. Transform-style only two values can be selected:

12345

// 语法：transform-style: flat|preserve-3d;transform-style: flat;// 默认，子元素将不保留其 3D 位置transform-style: preserve-3d;// 子元素将保留其 3D 位置。

When we specify a container's Transform-style property value to Preserve-3d, the container's descendant element will have a 3D effect, which is somewhat abstract, that is, after the current parent container has set the preserve-3d value, Its child elements can be 3D deformed relative to the plane where the parent element is located.

When the parent element is set to transform-style:preserve-3d, it is possible to perform a 3D warp on the child element, with 3D morphing as well as the 2D variant, set with the Transform property, Alternatively, you can manipulate an element variant by a function you have developed or through a three-dimensional matrix:

1, using TranslateX (length), Translatey (length), Translatez (length) for 3D displacement operation, as with 2D operations, the element displacement operation, can also be combined into translate3d (x, Y, Z) this notation;

2, the use of ScaleX (), ScaleY (), ScaleY () to perform 3D scaling operations, can also be combined into Scale3d (number,number,number) this notation;

3, the use of Rotatex (angle), Rotatey (angle), Rotatez (angle) for 3D rotation, can also be combined into Rotate3d (xangle,yangle,zangle) this notation.

For the API learning, I suggest to go to the source to see, not satisfied with the consumption of others summary, Transform-style API.

Here to specifically put forward, 3D axis, so-called around the X, Y, Z axis Three axis, this is not difficult, the sense of space imagination difficult, according to the API to try, around each axis to turn a bit understand:

After understanding, then rely on the above mentioned, in fact, we can already make a cube out. The so-called practice of knowledge, the following see how to step by step to get a cube.

1. Prepare six Squares

This good understanding, the cube six faces, first use DIV to make 6 faces, wrapped in the same parent container, the parent container set transform-style:preserve-3d, so that the next 6 faces can be 3D transform operation, in order to facilitate the demonstration, I use 6 colors different Surface:

The above figure is indicative of 6 faces, of course, we want to set 6 square div to absolute positioning, overlapping stacked together, then should be so, can only see a face:

2, the parent container do a simple transformation

For the final look, we need to transform the parent container, using the Rotate property described above, to change the container's angle:

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

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

Well, at this point, 6 div polygons are still overlapping.

3, 3D transformation for each face

Next is the 3D transformation of each face, using rotate can be rotated on the DIV plane, the use of translate can be used to translate the div plane, and remember now we are in three-dimensional space transformation, turn ah turn ah, we may get this shape:

Calculate the angle of rotation and the offset distance, the last 6 faces can be perfect into a cube! For better results, I add some transparency to each face and finally get a complete cube:

To be more stereoscopic, we can adjust the rotation angle of the parent container and rotate the angle that looks more stereoscopic:

At this point, a 3D cube is complete. Writing this article, Ben came here, this piece should be over, but when written here, suddenly whim, since the cube can (positive hexahedral), then the tetrahedron, is the eight-face body and even the sphere should also be able to make it?

Well, did not hold the Restless heart, immediately hands-on try, and finally made the following two:

No longer discuss in detail how to get these two, interested can go to my github to see the source, or directly with me to discuss the exchange, simple talk about ideas:

Regular tetrahedron

As with the cube, we first have to prepare 4 triangles (below will detail how to use CSS3 to make a triangular div), notice that 4 triangles should overlap together, and then three of them are rotated 70.5 degrees along the center point of the three edges (the angle of the tetrahedral surface), and a positive tetrahedron can be obtained.

Note that the sentence of 70.5 degrees is rotated along the center of the three edges, meaning that each shape is positioned at the center of the rotation, which is the Transform-origin property, which allows us to set the base point position of the rotated element.

Sphere

The above GIF picture because added animation animation effect, looks like a sphere in motion, actually only uses 4 Div, each div uses the border-radius:100% to set to the circle, then takes the center point as the datum, each circle div rotates the different angle around the Y axis , and then the entire circular container moves around the Y-axis, you can get such an effect.

Perspective and Perspective-origin 3D viewing distance, perspective/depth of field effect

Continue to say 3D, the next attribute is persepective and perspective-origin.

Persepective

12	// 语法perspective: number|none;

Perspective sets the distance of a three-dimensional perspective for an element, only for the descendants of the element, not its element itself.

Simply put, when the element is 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 a three-dimensional effect.

Perspective-origin

Perspective-origin represents the base point position of the 3D element perspective, and the default perspective center is the element where the container is perspective, not the midpoint of his descendant element, which is perspective-origin:50% 50%.

12345

// 语法perspective-origin: x-axis y-axis;// x-axis : 定义该视图在 x 轴上的位置。默认值：50%// y-axis : 定义该视图在 y 轴上的位置。默认值：50%

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

Said is always difficult to understand, using the above we made out of the cube test, I set the cube side length for the PX, here set the cube container Cuber-inner persepective for the PX, and Perspective-origin remains the default value:

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

The above setting, which is equivalent to I stand in the length of 100px to see this cube, the effect is as follows:

By adjusting the values of persepective and Perspective-origin, you can see different graphs, which is very well understood, we observe the angle of an object and the distance of the object is constantly changing, we look at the object is not the same, ah, imagine the elementary school text, Carambola and stars , it will be easy to understand.

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

3D perspective Photo Wall

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

Code is not affixed, this article has been very long, just a simple talk about the principle, interested in the source to get a look.

1, set up a stage, that is, wrap the pictures of the rotation of the container, give him a persepective distance, as well as transform-style:preserve-3d let descendants can be 3D transform;

2, prepare n pictures placed inside the container, n size to see a person likes, the picture of the 3D carousel effect is similar to the rotation of the steel tube dance movement, so is about the Y axis, we are concerned about the size of the Rotatey, according to the number of images we added, with 360° circumference of each picture equal, that is, each image The rotation of the film around the Y-axis fixed angle scattered: (The figure below is a schematic effect, I adjusted the angle and transparency)

3, this time, the N-chart is bound to overlap together, so the key step here is to use Translatez (length) to make the picture along the Z-axis translation, that is, the use of Translatez can make the picture closer or farther from us, because the previous step set the picture of the different Rotatey ( ) angle, so the image of N is set to a Translatez, the picture is naturally scattered in the center of the midpoint, that is:

4, the final use of animation, we let the stage, that is, wrap the picture of the container around the Y-axis rotation (rotatey), then a carousel-like 3D photo wall effect is complete!

The point to note here is to set the Persepective value and the value of the individual picture Translatez (length), persepective must be greater than the value of Translatez (length), otherwise it is equivalent to the stage running behind you, must not see the effect.

I wanted to continue.

• CSS3 Filter CSS3 Filter
• Transparent, radial-gradient transparency and gradients

These are some of the CSS3 properties that make the animation look better, but I think this article has been a long time, and these two properties are a bit off the subject, and intend to start another article, and then delve into it.

Say two points not mentioned in this article, but very useful small details, interested can go to understand, but also in the next detailed discussion:

1, use Transform3D API instead of Transform API, force to turn on GPU acceleration, improve the performance of website animation rendering;

2, using CSS3 will-change to improve the page scrolling, animation and other rendering performance

OK, this article to the end, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

The complete code of this article, as well as more CSS3 effects, can be seen on my github and hopefully you can point to a star.

The demo of this article poked me.

If this article is helpful to you, please click on the recommendation, write the article is not easy.

"CSS3 advanced" cool 3D rotation perspective