本文摘自PHP中文网,作者青灯夜游,侵删。
transform-style属性用来指定嵌套元素是怎样在三维空间中呈现。当值为flat时,表示所有子元素在2D平面呈现;值为preserve-3d时,表示所有子元素在3D空间中呈现。CSS3 transform-style属性
作用:transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
语法:
1 | transform-style: flat|preserve -3 d;
|
flat:子元素将不保留其 3D 位置。
preserve-3d:子元素将保留其 3D 位置。
注:该属性必须与 transform 属性一同使用。
CSS3 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); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</ style >
</ head >
< body >
< div id = "div1" >
< div id = "div2" >HELLO
< div id = "div3" >YELLOW</ div >
</ div >
</ div >
</ body >
</ html >
|
效果图:
以上就是transform-style属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
巧用css steps()函数实现随机翻牌效果!
border-image属性怎么用
css3绘制一个圆圆的loading转圈动画实例分享
css3新增属性有哪些
css3 text-justify属性怎么用
flex作用于box容器上的属性介绍
css3的@keyframes是什么
css怎么实现翻转效果
html5/css3 网页加载进度条的实现,下载进度条等经典案例
css3 border-image-outset属性怎么用?
更多相关阅读请进入《transform-style属性》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » transform-style属性怎么用