使用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.   

标签: 动漫动画

更多 动漫 相关资讯

8款超酷而实用的CSS3按钮动画

8款超酷而实用的CSS3按钮动画

1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、you**等大型社交网站。每一个分享按钮都有个大社交网站的Logo图

一个轻量级CSS3动画库:JX.Animate

一个轻量级CSS3动画库:JX.Animate

JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供。 Why CSS3 众所周知在支持HTML5的浏览器中,使

教你用CSS3动画实现的超炫过渡特效

教你用CSS3动画实现的超炫过渡特效

Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从

一个简单的CSS3文字动画插件textillate

一个简单的CSS3文字动画插件textillate

     Textillate.js 结合了强大的库提供了应用CSS3动画的任何文本的插件。 Textillate.js是可以非常简单固定头,以及令人惊讶的的强大animate.css 各 lettering.js库。

CSS3实现超酷的图像动画变换特效

CSS3实现超酷的图像动画变换特效

  在线演示 在线演示 本地下载   今天我们想要分享一些实验阶段的3D图像变换效果给大家,主要使用了CSS3 3D动画和jQuery。   怎样起作用的?   给定一组图片,我

HTML5+CSS3城市场景动画

HTML5+CSS3城市场景动画

     最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳、云朵、

CSS3动画效果-animate.css

CSS3动画效果-animate.css

animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验。动画效果包括强调突出,滑块,淡入淡出,放大缩

WebKit CSS3 动画基础

前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下。 首先看看效果 http://webdeveloperjuice.com/demos/css/css3effects.html 很悲剧的是css3动画现在只有WebKit内

更多 动画 相关资讯

纯HTML+CSS实现阿童木头像

纯HTML+CSS实现阿童木头像

他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”

视频教程:CSS3动画属性实用技巧教程

视频教程:CSS3动画属性实用技巧教程

目前CSS3动画已经越来越流行,在一些网页专题的产品介绍页面,手机APP首屏展示页面,又或者只是一个按钮简单变形,都可以使用CSS3来实现,虽然动画简单,但却让静态枯燥无味的页面增加

8款超酷而实用的CSS3按钮动画

8款超酷而实用的CSS3按钮动画

1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、you**等大型社交网站。每一个分享按钮都有个大社交网站的Logo图

7款纯CSS3实现的炫酷动画应用

7款纯CSS3实现的炫酷动画应用

HTML5确实非常强大,我们之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果?对,CSS3可以做到,下面分享的7款炫酷动

一个轻量级CSS3动画库:JX.Animate

一个轻量级CSS3动画库:JX.Animate

JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供。 Why CSS3 众所周知在支持HTML5的浏览器中,使

教你用CSS3动画实现的超炫过渡特效

教你用CSS3动画实现的超炫过渡特效

Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从

使用 CSS3 实现超炫的 Loading(加载)动画效果

使用 CSS3 实现超炫的 Loading(加载)动画效果

SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏

CSS3实现简单的动画图片说明效果

CSS3实现简单的动画图片说明效果 .container{ height:200px;width:400px; background:#000; overflow:hidden; position:relative; } .text{ background:rgba(0,

快速实现超酷动画/过渡效果的CSS3类库

快速实现超酷动画/过渡效果的CSS3类库

在今天这篇文章中,我们给大家推荐四款精心挑选的CSS3动画和过渡效果类库,可以帮助设计师多快好省的实现各种前端的动画效果,相信大家一定能够在以后的前端web项目中使用

Magic CSS3 – 创建各种神奇的交互动画效果

Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.