backface-visibility · CSS基礎

### backface-visibility屬性 ## 定義和用法 backface-visibility 屬性定義當元素不面向屏幕時是否可見。如果在旋轉元素不希望看到其背面時，該屬性很有用。 **Chrome/Safari 用戶：為了更好地理解這個屬性，查看演示:**?[查看在線實例](https://www.w3cschool.cn/statics/demosource/trycss3_backface_inuse.html)。默認值:visible繼承:no版本:CSS3JavaScript語法:object.style.backfaceVisibility="hidden" ## * * * 語法 ~~~ backface-visibility: visible|hidden; ~~~ | 值 | 描述 | | :-- | :-- | | visible | 默認值。背面是可見的。 | | hidden | 背面是不可見的。 | **實例--隱藏旋轉的div元素的背面:** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { position:relative; height:60px; width:60px; background-color:red; transform:rotateY(180deg); -webkit-transform:rotateY(180deg); /* Chrome and Safari */ -moz-transform:rotateY(180deg); /* Firefox */ } #div1 { -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; } #div2 { -webkit-backface-visibility:visible; -moz-backface-visibility:visible; -ms-backface-visibility:visible; } </style> </head> <body> <p>這個例子顯示了兩個div元素,旋轉了180度, 轉向遠離用戶的方向</p> <p>第一個div元素backface-visibility屬性設置為 "hidden", 因此應該是看不見的。.</p> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> <p><b>注意:</b> 該屬性只兼容 IE 10, Firefox, Chrome和 Safari.</p> </body> </html> ```