摘要: 通过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

使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果的更多相关文章

  1. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  2. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  3. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  4. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  5. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

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

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

  7. 一款纯css3实现的机器人看书动画效果

    今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. ...

  8. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  9. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

随机推荐

  1. php 关于stripslashes 和 addslashes的使用

    一.首先要先说到 php magic_quotes_gpc  .(get_magic_quotes_gpc()可以检测是否开启) PHP magic_quotes_gpc作用范围是:WEB客户服务端: ...

  2. Android 自定义RecyclerView 实现真正的Gallery效果

    http://blog.csdn.net/lmj623565791/article/details/38173061

  3. Lock较synchronized多出的特性

    1.尝试非阻塞形式获取锁 tryLock() :当前线程尝试获取锁,如果锁被占用返回false;如果成功则占有锁 //类似用法if(lock.tryLock()) { try { System.out ...

  4. python_os

    1. 基本功能的介绍 os模块包含普通的操作系统的功能 2. 常用的变量 (1)os.name 获取正在使用的平台, Windows 返回 nt, Linux或者Unix 返回 posix 3. 常用 ...

  5. XML转换为对象操作类详解

    //XML转换为对象操作类 //一,XML与Object转换类 using System.IO; using System.Runtime.Serialization.Formatters.Binar ...

  6. WIN8系统安装软件时提示"扩展属性不一致"的解决方法

    单位新添加了两台T440P笔记本电脑,需要安装五笔输入法,同事一直安装不上.开始以为是WIN8系统跟输入法不兼容的问题,怀疑是输入法下载有误.于是直接在输入法官网下载了输入法,问题依旧:扩展属性不一致 ...

  7. Dynamics AX 2012 R2 在AIF服务契约中使用DateTime

    Reinhard在AIF中使用DateTime作为服务契约的参数,与DotNet程序进行交互时,总是因为时区的问题,导致DotNet提交的System.DateTime与AIF中接收的DateTime ...

  8. RAM与ROM

    随着对计算机行业的深入了解,很多人开始听到一些RAM和ROM的讨论话题,之前我也不是很清楚,也不知道他和电脑的内存有什么联系.下面就让我们一起来学习一下这个吧. 首先RAM和ROM是什么 RAM和RO ...

  9. python学习之for语句

    1.range数字范围 for i in range(5): print (i) 结果显示: 0 1 2 3 4 2.列表显示 ']: print ("current num:", ...

  10. MacBook 显示隐藏文件夹命令

    1. 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 第一步:命令行执行上述命令 第二步:将Finder重新打开 第三步 ...