CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS background 屬性 CSS3 animation-timing-function 屬性

CSS3 backface-visibility 屬性使用方法及示例

CSS3的backface-visibility屬性確定被轉(zhuǎn)換元素的“背面”在面對(duì)用戶時(shí)是否可見(jiàn)。。

下表總結(jié)了此屬性的用法上下文和版本歷史記錄。

默認(rèn)值：	visible
適用于：	可變形元素
繼承：	沒(méi)有
可動(dòng)畫(huà)制作：	否。請(qǐng)參見(jiàn) 動(dòng)畫(huà)屬性。
版本：	CSS3的新功能
JavaScript語(yǔ)法:	object.style.backfaceVisibility="hidden"

backface-visibility的使用語(yǔ)法

該屬性的語(yǔ)法如下：

backface-visibility: visible | hidden | initial | inherit

下面的示例演示了如何使用backface-visibility屬性。

示例

.flip-container {
        margin: 50px;
        perspective: 1000px;
        display: inline-block;
    }
    .flip-container:hover .card {
        transform: rotateY(180deg);
    }
    .card, .front, .back {
        width: 130px;
        height: 195px;
    }
    .card {
        position: relative;
        transition: 0.5s all;
        transform-style: preserve-3d;
    }
    .front, .back {
        position: absolute;
        backface-visibility: hidden;
    }
    .front {
        z-index: 1;
        transform: rotateY(180deg);
    }
    .back {
        z-index: 2;
        transform: rotateY(0deg);
    }

測(cè)試看看?/?

注意：backface-visibility屬性對(duì)于創(chuàng)建旋轉(zhuǎn)硬幣或卡片翻轉(zhuǎn)之類(lèi)的動(dòng)畫(huà)非常有用，其中將兩個(gè)不同的圖像（即正面和背面）混合在一起以創(chuàng)建更好的3D旋轉(zhuǎn)效果。

屬性值

下表描述了此屬性的值。

值	描述
visible	指定背面是可見(jiàn)的，允許正面鏡像顯示。這是默認(rèn)值。
hidden	指定背面不可見(jiàn)，隱藏正面。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素backface-visibility屬性的計(jì)算值。

瀏覽器兼容性

backface-visibility屬性瀏覽器的兼容性，所有主流瀏覽器均支持該屬性。

	Firefox 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 15+ ^-o-，23+ ^-webkit-

進(jìn)一步閱讀

參見(jiàn)以下教程：CSS3過(guò)渡，CSS3 3D變換，CSS3動(dòng)畫(huà)。

相關(guān)屬性：perspective，perspective-origin，transform，transform-origin，transform-style，transition。

CSS background 屬性 CSS3 animation-timing-function 屬性