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

This article mainly introduces "the introduction of the transform-style property of setting 3D deformation in CSS3". In the daily operation, I believe that many people have doubts about setting the transform-style property of 3D deformation in CSS3. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the doubt of "introduction of transform-style property of 3D deformation in CSS3". Next, please follow the editor to study!

The transform-style attribute is an important attribute in 3D space, which specifies how nested elements are rendered in 3D space. He has two main attribute values: flat and preserve-3d.

The syntax for using the transform-style attribute is very simple:

CSS Code copies content to the clipboard

Transform-style: flat | preserve-3d

Where flatvalue is the default value, indicating that all child elements are rendered in the 2D plane. Preserve-3d means that all child elements are rendered in 3D space.

That is, if the value of transform-style is set to flat for an element, all child elements of that element will be flattened to the 2D plane of that element for rendering. Rotating the element along the X or Y axis causes child elements located in the positive or negative Z axis to appear on the plane of the element rather than in front of or behind it. If the value of transform-style is set to preserve-3d for an element, it means that no flattening operation is performed, and all his child elements are in 3D space.

The transform-style attribute needs to be set in the parent element and higher than any nested morph element. Finally, let's use an example of flipping to deepen our impression of the transform-style attribute:

HTML template

XML/HTML Code copies content to the clipboard

CSS

CSS Code copies content to the clipboard

.wrap {

Width: 500px

Height: 300px

Margin: 30px auto

Position: relative

Background: url (images/bg-grid.jpg) no-repeat center center

Background-size: 100%

}

/ * animate * /

@ keyframes spin {

0% {

Transform:rotateY (0deg)

}

100% {

Transform:rotateY (360deg)

}

}

.spin {

Width: 142px

Height: 200px

Position: absolute

Top: 50%

Left: 50%

Margin-left:-72px

Margin-top:-101px

Border: 1px dashed orange

Cursor: pointer

Transform-style: preserve-3d

}

/ * call animation * /

.spin: hover {

Animation:spin 5s linear infinite

}

.rotate {

Background: url (images/cardKingClub.png) no-repeat center

Background-size: 100%

Border: 5px solid hsla (50, 50, 50, 50, 50. 9)

Transform: perspective (200px) rotateY (45deg)

}

.rotate img {

Border: 1px solid green

Transform: rotateX (15deg) translateZ (10px)

Transform-origin: 0 0 40px

}

/ * change the default value of transform-style * /

. three-d {

Transform-style: preserve-3d

}

Special statement: in order to save space, the CSS3 attribute code in the code omits the private prefixes of each browser. In practice, each browser prefix needs to be added in order to be effective.

The effect is as follows:

As you can see, when the element sets the flat. flat value, its child element img does not spread out according to the translateZ () value, but rotates in the same plane, as shown in the section above; when the element .floor sets the preserve-3d value, its child element img is spread out according to the translateZ () value and is no longer stacked together, as shown in the lower part of the image above.

You should be reminded that if your element sets the transform-style value to preserve-3d, you cannot set the overflow value to hidden to prevent the child element from overflowing the container. If you set overflow:hidden, you can also force the child element to appear in the same plane (the same effect as if the element sets transform-style to flat), as shown in the following figure:

At this point, the study of "introduction to transform-style properties of 3D deformation in CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.