参考手册
CSS 属性大全
transform-origin
transition
返回 CSS 属性大全

CSS transform-style 属性

CSS transform-style 属性设置元素的子元素是位于 3D 空间中还是平面中。

如果选择平面，元素的子元素将不会有 3D 的遮挡关系。

实例

使被转换的子元素保留其 3D 转换：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #div1
  6. {
  7. position: relative;
  8. height: 200px;
  9. width: 200px;
  10. margin: 100px;
  11. padding:10px;
  12. border: 1px solid black;
  13. }
  15. #div2
  16. {
  17. padding:50px;
  18. position: absolute;
  19. border: 1px solid black;
  20. background-color: red;
  21. transform: rotateY(60deg);
  22. transform-style: preserve-3d;
  23. -webkit-transform: rotateY(60deg); /* Safari and Chrome */
  24. -webkit-transform-style: preserve-3d; /* Safari and Chrome */
  25. }
  27. #div3
  28. {
  29. padding:40px;
  30. position: absolute;
  31. border: 1px solid black;
  32. background-color: yellow;
  33. transform: rotateY(80deg);
  34. -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
  36. }
  37. </style>
  38. </head>
  40. <body>
  42. <div id="div1">
  43.   <div id="div2">HELLO
  44.       <div id="div3">YELLOW</div>
  45.   </div>
  46. </div>
  48. </body>
  49. </html>
运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性
transform-style36.012.0 -webkit-11.016.010.0 -moz-9.04.0 -webkit-23.015.0 -webkit-

定义和用法

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释：该属性必须与 transform 属性一同使用。

默认值：flat
继承性：no
版本：CSS3
JavaScript 语法：object.style.transformStyle="preserve-3d"

语法

  1. transform-style: flat|preserve-3d;
值描述
flat子元素将不保留其 3D 位置。
preserve-3d子元素将保留其 3D 位置。
transform-origin
transition

分类导航