使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果


使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果。当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时...

使用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"面消失,另一幅图片被展示出来。



  1. img {

  2.   position: absolute;

  3.   animation: turn 2s infinite;

  4. }

  5.   

  6. .donut-front {

  7.   z-index: 5;

  8.   backface-visibility: hidden;

  9. }

  10.   

  11. @keyframes turn {

  12.   to {

  13.     transform: rotateY(360deg);

  14.   }

  15. }     

复制代码

两张图片都使用相同的动画,只是第一张图片在旋转到背面时就被隐藏起来,这是第二张图片就自然的展示出来。

洒落的咖啡


这个demo中有两个咖啡杯图片:一个是杯子的正面,一个杯子的背面。咖啡的水滴是一幅单独的图片,开始时它是隐藏的,它被在X轴上旋转了180度,这使得我们开始时看到的是它的背面,又因为设置了backface-visibility: hidden;,因此它是不可见的。

这一次咖啡杯是沿X轴进行翻转:

  1. img {

  2.   position: absolute;

  3.   animation: turn-over 2s 700ms infinite;

  4. }

  5.   

  6. .cup-front {

  7.   z-index: 3;

  8.   backface-visibility: hidden;

  9. }

  10.   

  11. .coffee-drip {

  12.   position: absolute;

  13.   transform: rotateX(180deg);

  14.   backface-visibility: hidden;

  15.   animation: spill 2s infinite;

  16.   animation-delay: 700ms;

  17. }

  18.   

  19. @keyframes turn-over {

  20.   to {

  21.     transform: rotateX(-180deg);

  22.   }

  23. }

  24.   

标签: CSS