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

1、backface-visibility：visible
默認(rèn)值，背面朝向用戶時(shí)可見(jiàn)

2、backface-visibility：hidden
背面朝向用戶時(shí)不可見(jiàn)。

下面是各瀏覽器的兼容性

卡片翻轉(zhuǎn)特效的實(shí)現(xiàn)過(guò)程

一、創(chuàng)建一個(gè)容器

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

因?yàn)槭欠D(zhuǎn)卡片，所以為了保證正面反面可以重疊，我們需要把正反面放在同一個(gè)容器內(nèi)并為父容器設(shè)置position: relative;

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

二、在容器內(nèi)創(chuàng)建正面與反面

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

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

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

初始狀態(tài)
front作為正面，那他初始狀態(tài)應(yīng)是：翻轉(zhuǎn)角度為0 ，并且設(shè)置了
backface-visibility: hidden;

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

back是背面，那他的初始狀態(tài)肯定是: 設(shè)置了翻轉(zhuǎn)角度為180，并且設(shè)置了
backface-visibility: hidden;

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

我們順便給正面與背面設(shè)置上過(guò)渡效果transition確保正面與背面進(jìn)行翻轉(zhuǎn)時(shí)有動(dòng)畫(huà)過(guò)渡，不會(huì)太生硬

動(dòng)畫(huà)效果
transform是css3里面一個(gè)可以讓元素應(yīng)用 2D 或 3D 轉(zhuǎn)換的一個(gè)屬性。這個(gè)屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。

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

這個(gè)屬性可以讓定義的元素沿著 Y 軸的 3D 旋轉(zhuǎn)。

我們給父元素.card在鼠標(biāo)懸浮的時(shí)候，給正反面添加上反轉(zhuǎn)，讓正反面調(diào)換位置

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

效果圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。