使用CSS3 backface-visibility屬性我們可以制作出許多有趣的動(dòng)畫(huà)效果,。當(dāng)你翻轉(zhuǎn)一個(gè)元素的時(shí)候，你看到的是什么,？通常情況下,，我們應(yīng)該看到的是元素的背面，這是正常的情況,，但是有時(shí)候我們希望翻轉(zhuǎn)一個(gè)元素后看到的是另一個(gè)元素,。
查看演示 插件下載
使用CSS3 backface-visibility屬性我們可以制作出許多有趣的動(dòng)畫(huà)效果。當(dāng)你翻轉(zhuǎn)一個(gè)元素的時(shí)候,，你看到的是什么,？通常情況下，我們應(yīng)該看到的是元素的背面,，這是正常的情況,，但是有時(shí)候我們希望翻轉(zhuǎn)一個(gè)元素后看到的是另一個(gè)元素。通過(guò)backface-visibility:hidden;屬性,，我們可以使一個(gè)元素在翻轉(zhuǎn)之后消失,，這是可以使用另一個(gè)元素放在它的背面，從而制作出一種元素翻轉(zhuǎn)之后出現(xiàn)另一個(gè)元素的效果,。
什么是BACKFACE-VISIBILITY
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)的行為。
瀏覽器兼容
所有的現(xiàn)代瀏覽器都支持backface-visibility屬性,。Chrome,、Safari和Opera瀏覽器需要使用-webkit-的廠商前綴。IE10+的IE瀏覽器都支持該屬性,。關(guān)于瀏覽器對(duì)animations和transforms的支持,，可以查看Can I Use獲取相關(guān)信息,。
應(yīng)用舉例
我們?cè)谶@篇文章中將會(huì)列舉4個(gè)元素使用backface-visibility翻轉(zhuǎn)的例子。
旋轉(zhuǎn)的甜甜圈
這個(gè)demo時(shí)理解backface-visibility屬性的很好的例子,。當(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),。
灑落的咖啡 
這個(gè)demo中有兩個(gè)咖啡杯圖片：一個(gè)是杯子的正面，一個(gè)杯子的背面,?？Х鹊乃问且环鶈为?dú)的圖片，開(kāi)始時(shí)它是隱藏的,，它被在X軸上旋轉(zhuǎn)了180度,，這使得我們開(kāi)始時(shí)看到的是它的背面，又因?yàn)樵O(shè)置了backface-visibility: hidden;,，因此它是不可見(jiàn)的,。
這一次咖啡杯是沿X軸進(jìn)行翻轉(zhuǎn)：
- img {
- position: absolute;
- animation: turn-over 2s 700ms infinite;
- }
-
- .cup-front {
- z-index: 3;
- backface-visibility: hidden;
- }
-
- .coffee-drip {
- position: absolute;
- transform: rotateX(180deg);
- backface-visibility: hidden;
- animation: spill 2s infinite;
- animation-delay: 700ms;
- }
-
- @keyframes turn-over {
- to {
- transform: rotateX(-180deg);
- }
- }
-
- @keyframes spill {
- to {
- transform: translateY(200px);
- }
- }
商店的門(mén)
這里有三幅圖片：一幅是不帶牌子的門(mén)的正面，一幅是不帶牌子的門(mén)的背面（顏色上有區(qū)別）,，還有一幅是掛在門(mén)上的牌子,。在兩個(gè)門(mén)的圖片上都帶有相同大小的窗口，這個(gè)設(shè)置時(shí)的門(mén)在翻轉(zhuǎn)到背面時(shí)窗口也能正常顯示,。
- img {
- position: absolute;
- transform: perspective(600px) rotateY(45deg);
- transform-origin: right;
- animation: open 4s infinite;
- }
-
- .front {
- z-index: 2;
- backface-visibility: hidden;
- }
-
- @keyframes open {
- 50% {
- transform: perspective(600px) rotateY(-140deg);
- }
- }
當(dāng)門(mén)打開(kāi)的時(shí)候,，“front”面消失,，“back”展示出來(lái),，而門(mén)上的窗口保持不變。
翻轉(zhuǎn)的盒子
當(dāng)在3D空間中使用backface-visibility屬性會(huì)是什么情況呢,？這個(gè)例子展示了一個(gè)3D旋轉(zhuǎn)的盒子動(dòng)畫(huà),。.box元素包含6個(gè)面，它們使用translations和rotations在X,、Y和Z軸上分別定位,，組成一個(gè)立方體,。
盒子的每個(gè)面都設(shè)置了opacity為0.6，這意味著如果沒(méi)有backface-visibility:hidden;屬性,，我們可以看到盒子的所有面,。
盒子的面開(kāi)始時(shí)被設(shè)置為backface-visibility:hidden;，當(dāng)我們點(diǎn)擊backface-visibility按鈕時(shí),，會(huì)觸發(fā)backface-visibility: visible;,，這時(shí)，盒子的6個(gè)面都處于可見(jiàn)狀態(tài),。
小結(jié)
backface-visibility屬性可以使我們使用元素的背面來(lái)制作各種效果,。通過(guò)這個(gè)屬性我們可以制作出各種各樣的有趣的效果。希望通過(guò)這篇文章能是你對(duì)backface-visibility屬性有更進(jìn)一步的了解,。
via:http://www./ziliaoku/ ... g/201504151686.html
|
