在css3中，可以利用backface-visibility屬性，通過給元素添加“backface-visibility: hidden;”樣式來設置背面不可見。backface-visibility屬性可以設置當元素不面向屏幕時是否可見。
CSS3 backface-visibility屬性
backface-visibility 屬性定義當元素背面向屏幕時是否可見。
如果在旋轉(zhuǎn)元素不希望看到其背面時，該屬性很有用。
語法
backface-visibility: visible|hidden;
屬性值：
visible：背面是可見的。
hidden：背面是不可見的。
backface-visibility屬性和3D transform效果相關，它用于決定當一個元素的背面面向用戶的時候是否可見。例如下面圖片展示的兩個圓形元素，前面一個是正面，后面一個是背面。當它翻轉(zhuǎn)到背面的時候，上面的文字應該是正面的鏡像，這是默認的行為。
當使用backface-visibility: hidden;樣式后，另一幅代表背面的圖片來取代原來的背面
瀏覽器兼容
所有的現(xiàn)代瀏覽器都支持backface-visibility屬性。Chrome、Safari和Opera瀏覽器需要使用-webkit-的廠商前綴。IE10+的IE瀏覽器都支持該屬性。
示例：旋轉(zhuǎn)的甜甜圈
當我們翻轉(zhuǎn)了甜圈后，不希望再看到它的front面。因此我們需要另一幅代表甜圈背面的圖片來取代原來的背面。我們會將"front"面和"back"main放置在相同的位置上，"front"面位于"back"面的前面。"front"面使用backface-visibility: hidden;來隱藏背面。它們會沿Y軸同步旋轉(zhuǎn)，轉(zhuǎn)動背面時，"front"面消失，另一幅圖片被展示出來。
img {
position: absolute;
animation: turn 2s infinite;
}
.donut-front {
z-index: 5;
backface-visibility: hidden;
}
@keyframes turn {
to {
transform: rotateY(360deg);
}
}兩張圖片都使用相同的動畫，只是第一張圖片在旋轉(zhuǎn)到背面時就被隱藏起來，這是第二張圖片就自然的展示出來。
