©
This document uses PHP Chinese website manual Release
transform-style:flat | preserve-3d
默认值:flat
适用于:变换元素
继承性:无
动画性:否
计算值:指定值
媒体:视觉
flat:指定子元素位于此元素所在平面内
preserve-3d:指定子元素定位在三维空间内
当该属性值为「preserve-3d」时,元素将会创建局部堆叠上下文。
决定一个变换元素看起来是处在三维空间还是平面内,需要该元素的父元素上定义 <' transform-style '> 属性。
对应的脚本特性为transformStyle。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-9.0 | 2.0-9.0 | 4.0-11.0 | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-2.3 | 18.0-34.0-webkit- |
10.0-11.0-ms-#1 | 10.0-15.0-moz- | 12.0-35.0-webkit- | 9.0+ | 23.0+ | 9.0+ | 3.0-4.4.4-webkit- | 35.0+ | |
Edge | 16.0+ | 36.0+ | 40.0+ |
不支持「preserve-3d」属性值
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>transform-style_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" /> <meta name="copyright" content="www.doyoe.com" /> <style> body { -webkit-perspective: 1000px; perspective: 1000px; } .cube { position: relative; font-size: 80px; width: 2em; margin: 1.5em auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-30deg) rotateY(30deg); transform: rotateX(-30deg) rotateY(30deg); } .cube > div { position: absolute; width: 2em; height: 2em; background: rgba(0, 0, 0, .1); border: 1px solid #999; color: white; text-align: center; line-height: 2em; } .front { -webkit-transform: translateZ(1em); transform: translateZ(1em); } .top { -webkit-transform: rotateX(90deg) translateZ(1em); transform: rotateX(90deg) translateZ(1em); } .right { -webkit-transform: rotateY(90deg) translateZ(1em); transform: rotateY(90deg) translateZ(1em); } .left { -webkit-transform: rotateY(-90deg) translateZ(1em); transform: rotateY(-90deg) translateZ(1em); } .bottom { -webkit-transform: rotateX(-90deg) translateZ(1em); transform: rotateX(-90deg) translateZ(1em); } .back { -webkit-transform: rotateY(-180deg) translateZ(1em); transform: rotateY(-180deg) translateZ(1em); } </style> </head> <body> <div class="cube"> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例