参考手册
CSS 属性大全
animation-timing-function
background
返回 CSS 属性大全

CSS backface-visibility 属性

CSS backface-visibility 属性指定当元素背面朝向观察者时是否可见。

元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。）

实例

隐藏被旋转的 div 元素的背面：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. position:relative;
  8. height:60px;
  9. width:60px;
  10. border:1px solid #000;
  11. background-color:yellow;
  12. transform:rotateY(180deg);
  13. -webkit-transform:rotateY(180deg); /* Chrome and Safari */
  14. -moz-transform:rotateY(180deg); /* Firefox */
  15. }
  16. #div1
  17. {
  18. -webkit-backface-visibility:hidden;
  19. -moz-backface-visibility:hidden;
  20. -ms-backface-visibility:hidden;
  21. }
  22. #div2
  23. {
  24. -webkit-backface-visibility:visible;
  25. -moz-backface-visibility:visible;
  26. -ms-backface-visibility:visible;
  27. }
  28. </style>
  29. </head>
  30. <body>
  32. <p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>
  34. <p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>
  36. <div id="div1">DIV 1</div>
  38. <div id="div2">DIV 2</div>
  40. <p><b>注释：</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p>
  42. </body>
  43. </html>
运行一下

浏览器支持

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

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

属性
backface-visibility36.012.0 -webkit-10.016.010.0 -moz-4.0 -webkit-23.015.0 -webkit-

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。

Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。

定义和用法

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用。

默认值：visible
继承性：no
版本：CSS3
JavaScript 语法：object.style.backfaceVisibility="hidden"

语法

  1. backface-visibility: visible|hidden;
值描述
visible背面是可见的。
hidden背面是不可见的。
animation-timing-function
background

分类导航