使用CSS3 BACKFACE-VISIBILITY屬性制作翻轉動畫效果

摘要: 通過backface-visibility:hidden;屬性，我們可以使一個元素在翻轉之后消失，這是可以使用另一個元素放在它的背面，從而制作出一種元素翻轉之后出現另一個元素的效果。 ...

使用CSS3 backface-visibility屬性我們可以制作出許多有趣的動畫效果。當你翻轉一個元素的時候，你看到的是什么？通常情況下，我們應該看到的是元素的背面，這是正常的情況，但是有時候我們希望翻轉一個元素后看到的是另一個元素。

查看演示  插件下載

 

使用CSS3 backface-visibility屬性我們可以制作出許多有趣的動畫效果。當你翻轉一個元素的時候，你看到的是什么？通常情況下，我們應該看到的是 元素的背面，這是正常的情況，但是有時候我們希望翻轉一個元素后看到的是另一個元素。通過backface-visibility:hidden;屬性， 我們可以使一個元素在翻轉之后消失，這是可以使用另一個元素放在它的背面，從而制作出一種元素翻轉之后出現另一個元素的效果。


什么是BACKFACE-VISIBILITY


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

瀏覽器兼容


所有的現代瀏覽器都支持backface-visibility屬性。Chrome、Safari和Opera瀏覽 器需要使用-webkit-的廠商前綴。IE10+的IE瀏覽器都支持該屬性。關於瀏覽器對animations和transforms的支持，可以查看 Can I Use獲取相關信息。


應用舉例


我們在這篇文章中將會列舉4個元素使用backface-visibility翻轉的例子。


旋轉的甜甜圈

這個demo時理解backface- visibility屬性的很好的例子。當我們翻轉了甜圈后，不希望再看到它的front面。因此我們需要另一幅代表甜圈背面的圖片來取代原來的背面。我 們會將"front"面和"back"main放置在相同的位置上，"front"面位於"back"面的前面。"front"面使用backface- visibility: hidden;來隱藏背面。它們會沿Y軸同步旋轉，轉動背面時，"front"面消失，另一幅圖片被展示出來。

     

img {
  position: absolute;
  animation: turn 2s infinite;
}
  
.donut-front {
  z-index: 5;
  backface-visibility: hidden;
}
  
@keyframes turn {
  to {
    transform: rotateY(360deg);
  }
}     

兩張圖片都使用相同的動畫，只是第一張圖片在旋轉到背面時就被隱藏起來，這是第二張圖片就自然的展示出來。

灑落的咖啡

這個demo中有兩個咖啡杯圖片： 一個是杯子的正面，一個杯子的背面。咖啡的水滴是一幅單獨的圖片，開始時它是隱藏的，它被在X軸上旋轉了180度，這使得我們開始時看到的是它的背面，又 因為設置了backface-visibility: hidden;，因此它是不可見的。

這一次咖啡杯是沿X軸進行翻轉：

  

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);
  }
}         

 

商店的門

這里有三幅圖片：一幅是不帶牌子的門的正面，一幅是不帶牌子的門的背面（顏色上有區別），還有一幅是掛在門上的牌子。在兩個門的圖片上都帶有相同大小的窗口，這個設置時的門在翻轉到背面時窗口也能正常顯示。

 

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);
  }
}         

 

 

 

 

當門打開的時候，“front”面消失，“back”展示出來，而門上的窗口保持不變。

翻轉的盒子

 

當在3D空間中使用backface-visibility屬性會是什么情況呢？這個例子展示了一個3D旋轉的盒子動畫。.box元素包含6個面，它們使用translations和rotations在X、Y和Z軸上分別定位，組成一個立方體。

盒子的每個面都設置了opacity為0.6，這意味着如果沒有backface-visibility:hidden;屬性，我們可以看到盒子的所有面。

盒子的面開始時被設置為backface-visibility:hidden;，當我們點擊backface-visibility按鈕時，會觸發backface-visibility: visible;，這時，盒子的6個面都處於可見狀態。

小結

backface-visibility屬性可以使我們使用元素的背面來制作各種效果。通過這個屬性我們可以制作出各種各樣的有趣的效果。希望通過這篇文章能是你對backface-visibility屬性有更進一步的了解。

via:http://www.htmleaf.com/ziliaoku/ ... g/201504151686.html