DigitalOcean 提供适合您旅程各个阶段的云产品。 立即开始使用 价值 200 美元的免费额度!
当应用于元素时,transform-style
属性决定该元素的子元素是在 3D 空间中定位,还是被扁平化。
.parent {
transform-style: preserve-3d;
}
它接受两个值之一:flat
(默认值)和 preserve-3d
。 要演示这两个值之间的区别,请点击下方 CodePen 中的切换按钮
When the button is clicked, the demo uses JavaScript to toggle the transform-style
value between preserve-3d
and flat
.
As you can see, when the value is changed to flat
, the child elements are no longer stacked according the the translateZ
values (in 3D space), but instead flatten out to appear the way elements are by default on an HTML page.
Browser support
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
No 1 | All | 10 2 | 12 3 | 4 3 | 15 3 |
Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
---|---|---|---|---|
All | All | 3 3 | 3.2 3 | 62 |
1 Internet Explorer 10 supports 3D transforms, but does not support the transform-style property.
2 Supported in Firefox 10-15 with prefix
-moz-
3 Supported in Chrome 12-35, Safari 4-8, Safari iOS 3.2-8.4, and Opera 15-22 with prefix
-webkit-
Opera supports transform-style since version 15.
Thanks I updated that. Looks like it’s supported post-Blink-transition.
IE is the worst browser in the world. I wish Microsoft to buy Mozilla or at least Opera.. So IE can finally rest in peace… Damn…
Too right. How can a company with all of Microsoft’s resources lag so far behind every other browser in terms of feature adoption?
I think it’s by design. From what I have observed with Microsoft, I think the problem is that they have too many resources in the area of browser development. They innovated plenty in the early IE stages (including the invention of AJAX) but got too much into their own “standards” in later releases. That unconventional progress became the snake that ate it’s own tail. Now we just have crap. Thanks Microsoft…
I dislike IE as well however the Spartan looks like it could have potential. So at least they may have a fair chance :P
IE is actually a fantastic browser these days. It leads the way in a lot of areas (first to implement CSS grid, pointer events, scroll rails and snap points, independent animations, independent input, and more). But just like Chrome is way behind in several of those areas, IE is behind on a few others, like preserve-3d which is only in the dev channel / tech preview release currently. It also had Chrome way beat with unprefixed standard-compliant CSS transforms, transitions, and animations.
Thing is, if you only use Chrome, you assume its particular selection of features is the standard. But that’s a very narrow perspective.
Internet Explorer supports transform-style since version 11
Not perspective: 600; and perspective: 600px;