本文摘自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隐藏图片背景的文字内容
html5 border属性怎么设置?html5 table中的border属性介绍
css right属性怎么用
css文件怎么解压缩
css设置边框的属性有哪些
css字体溢出怎么隐藏
怎样用css实现无缝轮播图切换?
谈谈css实现水平垂直居中布局的方法
详解css contain新特性如何控制页面重绘与重排
快速了解ui组件功能设计
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css transform-style属性怎么用