html css动画自动旋转,使用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属性有更进一步的了解。
html css动画自动旋转,使用CSS3 backface-visibility属性制作翻转动画效果相关推荐
- html css动画自动旋转,不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
- 纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
- html css动画自动旋转,基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 实现的代码. html代码: $('.mod_info2__power3').o ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- 导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
- html css动画自动旋转,html – 使这个CSS3动画旋转只旋转一次
我试图动画一个饼图,它从0度旋转到我希望它结束的任何程度(假设300度,无关紧要).有一个潜在的圆圈,其中一个旋转在顶部.就目前而言,饼图旋转整整360度,然后以最终的度数位置结束(在这种情况下为 ...
- html css动画自动旋转,css3实现自动旋转动画效果
1.[代码][HTML]代码 CSS3自动旋转效果 .swiper-container{ width:100%; margin:300px auto; position:relative; } .sw ...
- html css动画自动旋转,HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)...
代码如下: HTML5-页面切换动画 #viewsWrapper { top:0px; left:0px; width:300px; height:200px; position:relative; ...
- logo自动旋转 html,CSS3创作有意思的旋转LOGO
CSS3创作有意思的旋转LOGO Sponsor 在网页设计个哪里都能发挥创意,包括LOGO也是哦,前几天看到个tumblr的博客(staff.tumblr.com/)设计,觉得这个博客的logo挺有 ...
最新文章
- Linux-C-Program:makefile
- Android 动态Tab分页效果实现
- Windows下使用apache模块实现合并多个js、css提高网页加载速度
- python什么时候用类方法_小白提问:python 在什么时候用函数,什么时候用类?...
- 【Task】- JVM逃逸分析等待学习任务
- 简单的Spring Memcached – Spring缓存抽象和Memcached
- winfrom软件开发汽车测试_ETci — 全自动软件测试调度(持续集成)平台
- [hadoop读书笔记] 第十五章 sqoop1.4.6小实验 - 将mysq数据导入hive
- 查看使用yum安装的软件路径
- 顺丰快递:请签收MySQL灵魂十连问
- 如何解决Mac大写锁定键失灵?
- 请问投稿中要求上传的author_投稿要求
- php源码 运费计算,php – Woocommerce:获取运输邮政编码以计算运费
- iscript脚本截取字符串
- Vue3的生命周期的使用
- 外星人大战---------------------游戏开发
- easyexcel Create workbook failure 问题解决
- Could not resolve
- OpenStreetMap数据Qt5分析实战(基于2020数据)
- ABCD选项的排序方式
热门文章
- 【TS学习和在react中的简单应用】
- 单片机六位抢答器c语言程序,单片机六人抢答器程序.doc
- Android视频录制并转GIF格式
- SDAE-stacked denoised autoencoder (堆栈去噪自编码器)
- 考研英语怎么复习?基础差怎么复习?
- 六招教你辨别LED屏的好坏
- UE4的自定义输入设备插件制作方法
- code 128 ....command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.git解决方案
- Flex【原创】模拟Android图案解锁
- (详细版)java实现小程序获取微信登录,用户信息,手机号,头像