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