這篇文章主要介紹了css3設(shè)置元素背面不可見的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司主營曹縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),曹縣h5微信小程序定制開發(fā)搭建,曹縣網(wǎng)站營銷推廣歡迎曹縣等地區(qū)企業(yè)咨詢

在css3中，可以利用backface-visibility屬性，通過給元素添加“backface-visibility: hidden;”樣式來設(shè)置背面不可見。backface-visibility屬性可以設(shè)置當(dāng)元素不面向屏幕時是否可見。

CSS3 backface-visibility屬性

backface-visibility 屬性定義當(dāng)元素背面向屏幕時是否可見。

如果在旋轉(zhuǎn)元素不希望看到其背面時，該屬性很有用。

語法

backface-visibility: visible|hidden;

屬性值：

• visible：背面是可見的。

• hidden：背面是不可見的。

backface-visibility屬性和3D transform效果相關(guān)，它用于決定當(dāng)一個元素的背面面向用戶的時候是否可見。例如下面圖片展示的兩個圓形元素，前面一個是正面，后面一個是背面。當(dāng)它翻轉(zhuǎn)到背面的時候，上面的文字應(yīng)該是正面的鏡像，這是默認(rèn)的行為。

當(dāng)使用backface-visibility: hidden;樣式后，另一幅代表背面的圖片來取代原來的背面

【 】

瀏覽器兼容

所有的現(xiàn)代瀏覽器都支持backface-visibility屬性。Chrome、Safari和Opera瀏覽器需要使用-webkit-的廠商前綴。IE10+的IE瀏覽器都支持該屬性。

示例：旋轉(zhuǎn)的甜甜圈

當(dāng)我們翻轉(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)到背面時就被隱藏起來，這是第二張圖片就自然的展示出來。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3設(shè)置元素背面不可見的方法”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!