目前這個屬性支持兩個值，兼容性并不是很好

1、backface-visibility：visible
默認值，背面朝向用戶時可見

2、backface-visibility：hidden
背面朝向用戶時不可見。

下面是各瀏覽器的兼容性

卡片翻轉特效的實現過程

一、創建一個容器

<div class="card"> </div>

因為是翻轉卡片，所以為了保證正面反面可以重疊，我們需要把正反面放在同一個容器內并為父容器設置position: relative;

.card {width: 720px;height: 720px;position: relative;}

二、在容器內創建正面與反面

<div class="card"> <div class="front"><img src="logo.png" /></div><div class="back"><p>滕王高閣臨江渚，佩玉鳴鸞罷歌舞。</p><p>畫棟朝飛南浦云，珠簾暮卷西山雨。</p><p>閑云潭影日悠悠，物換星移幾度秋。</p><p>閣中帝子今何在？檻外長江空自流。</p></div> </div>

然后我們需要為正反面設置position: absolute;讓正反面重疊在一起

.front,.back {background-image: linear-gradient(to bottom right, #96e077, #2daa84);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

初始狀態
front作為正面，那他初始狀態應是：翻轉角度為0 ，并且設置了
backface-visibility: hidden;

.front {backface-visibility: hidden;transition: transform 500ms linear;transform: rotateY(0deg)}

back是背面，那他的初始狀態肯定是: 設置了翻轉角度為180，并且設置了
backface-visibility: hidden;

.back {transform: rotateY(180deg);backface-visibility: hidden;transition: transform 300ms linear;}

我們順便給正面與背面設置上過渡效果transition確保正面與背面進行翻轉時有動畫過渡，不會太生硬

動畫效果
transform是css3里面一個可以讓元素應用 2D 或 3D 轉換的一個屬性。這個屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

然后我們需要用到的是transform: rotateY(angle);

這個屬性可以讓定義的元素沿著 Y 軸的 3D 旋轉。

我們給父元素.card在鼠標懸浮的時候，給正反面添加上反轉，讓正反面調換位置

.card:hover .front {transform: rotateY(-180deg);}.card:hover .back {transform: rotateY(0deg); }

效果圖

總結

以上是生活随笔為你收集整理的backface-visibility 翻转特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。