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

This article will explain in detail how to use the transform-style attribute in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

CSS3transform-style attribute

What it does: the transform-style attribute specifies how nested elements are rendered in 3D space.

Syntax:

Transform-style:flat | preserve-3d

Flat: child elements will not retain their 3D positions.

Preserve-3d: child elements retain their 3D positions.

Note: this property must be used with the transform property.

An example of using the CSS3transform-style attribute

# div1

{

Position:relative

Height:200px

Width:200px

Margin:100px

Padding:10px

Border:1pxsolidblack

}

# div2

{

Padding:50px

Position:absolute

Border:1pxsolidblack

Background-color:red

Transform:rotateY (60deg)

Transform-style:preserve-3d

-webkit-transform:rotateY (60deg); / * SafariandChrome*/

-webkit-transform-style:preserve-3d;/*SafariandChrome*/

}

# div3

{

Padding:40px

Position:absolute

Border:1pxsolidblack

Background-color:yellow

Transform:rotateY (80deg)

-webkit-transform:rotateY (- 60deg); / * SafariandChrome*/

}

HELLO

YELLOW

This is the end of this article on "how to use transform-style attributes in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.