本文摘自PHP中文网,作者藏色散人,侵删。
css transform-style属性规定如何在3D空间中呈现被嵌套的元素,其语法是transform-style: flat|preserve-3d;该属性必须与transform属性一同使用。css transform-style属性怎么用?
作用:transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
语法:
1 | transform-style: flat|preserve-3d
|
说明:
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
注释:
该属性必须与 transform 属性一同使用。
css transform-style属性使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);
-webkit-transform-style: preserve-3d;
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg);
}
</style>
</head>
<body>
<div id= "div1" >
<div id= "div2" >HELLO
<div id= "div3" >YELLOW</div>
</div>
</div>
</body>
</html>
|
效果输出:
以上就是css transform-style属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css中width有啥属性?
css如何解决不同浏览器下文本兼容的问题
css solid什么意思
css精灵技术有什么用?
css怎么选择奇偶行元素
css设置字体的属性有哪些
css中怎么设置背景图
css 的位置怎么设置
css中的流体布局是什么
css为什么会出现清除浮动的问题
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css transform-style属性怎么用