目录
css3动画手册
transform-style[3D呈现]
语法
transform-style: flat | preserve-3d
语法项目 | 说明 |
---|---|
初始值 | flat |
适用于 | 块元素和行内元素 |
可否继承 | 否 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
设置内嵌的元素在 3D 空间如何呈现。有两个值:flat
:所有子元素在 2D 平面呈现。preserve-3d
:保留3D空间。
取值
flat
:所有子元素在 2D 平面呈现。
preserve-3d
:保留3D空间。
实例代码
CSS
.demo_box{ background:none;width:700px;height:300px;border:none; } .perspective{ position:relative;width:200px;height:200px;float:left;margin:20px; -webkit-transform:perspective(300px); -moz-transform:perspective(300px); } .m3d{ -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } .perspective span{ display:block;position:absolute;width:198px;height:198px;font-size:120px;line-height:198px;text-align:center; background:rgba(0,0,0,0.2);border:1px solid #333; } .front{ -webkit-transform:rotateY(0deg) translateZ(100px); -moz-transform:rotateY(0deg) translateZ(100px); } .back{ -webkit-transform:rotateY(180deg) translateZ(100px); -moz-transform:rotateY(180deg) translateZ(100px); } .right{ -webkit-transform:rotateY(90deg) translateZ(100px); -moz-transform:rotateY(90deg) translateZ(100px); } .left{ -webkit-transform:rotateY(-90deg) translateZ(100px); -moz-transform:rotateY(-90deg) translateZ(100px); } .top{ -webkit-transform:rotateX(90deg) translateZ(100px); -moz-transform:rotateX(90deg) translateZ(100px); } .bottom{ -webkit-transform:rotateX(-90deg) translateZ(100px); -moz-transform:rotateX(-90deg) translateZ(100px); }
html
1 2 3 4 5 61 2 3 4 5 6
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |