How to use the transform-style attribute in css
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.
