小莫的成神之旅(二)纯css3实现翻转效果
2017-04-19 16:10
337 查看
小莫碎碎念
小莫见到很多网站的图片翻转效果很炫,忍不住手痒痒,遂摩拳擦掌打算研究一番,无奈17素材网上很多成型的插件都比较复杂,不适合小莫这样的小白,所以找到一个简单的栗子赶紧拿来和众小白分享,大神请绕路,大神请绕路,大神请绕路,重要的事情说三遍!
虽然小莫研究了一番,但自我感觉还没吃到css3的精髓,下面只是小莫一些浅显的理解,如有纰漏,还望众小白海涵,众大神不吝赐教。
由于是直接从网上找的栗子,所以直接上干货,省略实现思路这一模块。
最终代码
代码分析
首先,先来科普几个官方定义:
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。通俗点说就是父元素添加这个属性后,子元素可以呈现3D的效果。比方说像下面左图介样,如果不设置它,就会像右边介样:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。也就是说我们的动画效果主要是依靠它滴,这是一个神奇的属性,只有你想不到的没有它做不到的!(夸张手法,夸张手法,见谅见谅)
transition 属性是一个简写属性,用于设置四个过渡属性。简单来说这是翻转动画的执行者。
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。这个属性可以有两种值:flat,子元素将不保留其 3D 位置(也就是说,当transform-style为flat的时候,再对其子元素改变3D位置则不起作用);preserve-3d子元素将保留其 3D 位置。
backface-visibility 属性定义当元素不面向屏幕时是否可见。
好,下面小莫课堂正式开课啦!
既然要实现翻转效果,那首先要定义一个双面div,默认显示正面,鼠标hover显示反面,鼠标离开则显示正面,但在这之前我们需要一个装双面div的盒子,就像下面这样:
盒子有了,下面就要定义双面div了,就像一张扑克牌,虽然有两面但它仍旧是一个整体,我们来定义一张扑克牌...呃,定义一个双面div:
下面就是扑克牌的正反面,也就是双面div正反面的内容:
盒子、双面div、正反面内容都有了,万事俱备只欠“翻转”这个东风啦:
当鼠标hover到盒子上则执行过度动画,这里没有把hover加到双面div上是因为,双面div在旋转过程中元素的位置大小都会发生变化:
到此为止,翻转功能就算是圆满啦!
小莫在找栗子的时候还找到了另一个品相不太好的栗子,就是不给双面div加翻转动作,而将翻转动作加到正反面div上,在只有正反面的时候这样做显然有些累赘,但如果是多面内容可能就不同,这种方法或许更灵活些,当然现在小莫的技能还没点到那个级别,多面翻转的功能留着日后实现吧!
总结
一入css3深似海,从此XX是路人!(这里XX泛指各种动画插件,请自行脑补。)为什么总觉得没有个总结就不算是写完了呢?这是个不好的习惯,咳咳。(写小说凑字数留下的恶习,见谅见谅)
小莫见到很多网站的图片翻转效果很炫,忍不住手痒痒,遂摩拳擦掌打算研究一番,无奈17素材网上很多成型的插件都比较复杂,不适合小莫这样的小白,所以找到一个简单的栗子赶紧拿来和众小白分享,大神请绕路,大神请绕路,大神请绕路,重要的事情说三遍!
虽然小莫研究了一番,但自我感觉还没吃到css3的精髓,下面只是小莫一些浅显的理解,如有纰漏,还望众小白海涵,众大神不吝赐教。
由于是直接从网上找的栗子,所以直接上干货,省略实现思路这一模块。
最终代码
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 /* entire container, keeps perspective */ 7 .flip-container { 8 border: 1px solid black; 9 -webkit-perspective: 600px; 10 -moz-perspective: 600px; 11 } 12 /* flip the pane when hovered */ 13 .flip-container:hover .flipper { 14 transform: rotateY(180deg); 15 -moz-transform:rotateY(180deg); /* Firefox */ 16 } 17 18 .flip-container, .front, .back { 19 width: 320px; 20 height: 320px; 21 } 22 23 /* flip speed goes here */ 24 .flipper { 25 transition: 0.6s; 26 transform-style: preserve-3d; 27 -moz-transform-style: preserve-3d; 28 position: relative; 29 } 30 31 /* hide back of pane during swap */ 32 .front, .back { 33 line-height:320px; 34 color:#ffffff; 35 text-align: center; 36 font-size: 24px; 37 38 backface-visibility:hidden; 39 -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ 40 -moz-backface-visibility:hidden; /* Firefox */ 41 position: absolute; 42 top: 0; 43 left: 0; 44 } 45 46 /* front pane, placed above back */ 47 .front { 48 background-color: #4cae4c; 49 } 50 51 /* back, initially hidden pane */ 52 .back { 53 background-color: #5bc0de; 54 transform: rotateY(180deg); 55 -moz-transform:rotateY(180deg); /* Firefox */ 56 } 57 </style> 58 59 </head> 60 <body> 61 <div class="flip-container"> 62 <div class="flipper"> 63 <div class="front"> 64 front 65 </div> 66 <div class="back"> 67 back 68 </div> 69 </div> 70 </div> 71 </body> 72 </html>
代码分析
首先,先来科普几个官方定义:
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。通俗点说就是父元素添加这个属性后,子元素可以呈现3D的效果。比方说像下面左图介样,如果不设置它,就会像右边介样:
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。也就是说我们的动画效果主要是依靠它滴,这是一个神奇的属性,只有你想不到的没有它做不到的!(夸张手法,夸张手法,见谅见谅)
transition 属性是一个简写属性,用于设置四个过渡属性。简单来说这是翻转动画的执行者。
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。这个属性可以有两种值:flat,子元素将不保留其 3D 位置(也就是说,当transform-style为flat的时候,再对其子元素改变3D位置则不起作用);preserve-3d子元素将保留其 3D 位置。
backface-visibility 属性定义当元素不面向屏幕时是否可见。
好,下面小莫课堂正式开课啦!
既然要实现翻转效果,那首先要定义一个双面div,默认显示正面,鼠标hover显示反面,鼠标离开则显示正面,但在这之前我们需要一个装双面div的盒子,就像下面这样:
1 <div class="flip-container"> 2 3 </div> 4 <style> 5 .flip-container { 6 border: 1px solid black; /*纯属为了方便查看效果而定义*/ 7 -webkit-perspective: 600px; /*加上这个属性,盒子的子元素就能有3D效果了,不然只能是一个被压扁的盒子*/ 8 -moz-perspective: 600px; 9 } 10 </style>
盒子有了,下面就要定义双面div了,就像一张扑克牌,虽然有两面但它仍旧是一个整体,我们来定义一张扑克牌...呃,定义一个双面div:
1 <div class="flipper"> 2 3 </div> 4 <style> 5 .flip-container { 6 width: 320px; 7 height: 320px; 8 line-height:320px; 9 color:#ffffff; 10 text-align: center; 11 font-size: 24px; 12 13 transition: 0.6s; /*双面div翻转效果的时间*/ 14 transform-style: preserve-3d; /*双面div的子元素可保持其3D位置*/ 15 -moz-transform-style: preserve-3d; 16 position: relative; 17 } 18 </style>
下面就是扑克牌的正反面,也就是双面div正反面的内容:
1 <div class="front"> 2 front 3 </div> 4 <div class="back"> 5 back 6 </div> 7 <style> 8 .front, .back { 9 line-height:320px; 10 color:#ffffff; 11 text-align: center; 12 font-size: 24px; 13 14 backface-visibility:hidden; /*div背对屏幕时不可见*/ 15 -webkit-backface-visibility:hidden; /* Chrome 和 Safari */ 16 -moz-backface-visibility:hidden; /* Firefox */ 17 position: absolute; 18 top: 0; 19 left: 0; 20 } 21 22 .front { 23 background-color: #4cae4c; 24 } 25 26 .back { 27 background-color: #5bc0de; 28 transform: rotateY(180deg); /*反面内容初始化为背对着屏幕的*/ 29 -moz-transform:rotateY(180deg); /* Firefox */ 30 } 31 </style>
盒子、双面div、正反面内容都有了,万事俱备只欠“翻转”这个东风啦:
1 .flip-container:hover .flipper { 2 transform: rotateY(180deg); 3 -moz-transform:rotateY(180deg); /* Firefox */ 4 }
当鼠标hover到盒子上则执行过度动画,这里没有把hover加到双面div上是因为,双面div在旋转过程中元素的位置大小都会发生变化:
到此为止,翻转功能就算是圆满啦!
小莫在找栗子的时候还找到了另一个品相不太好的栗子,就是不给双面div加翻转动作,而将翻转动作加到正反面div上,在只有正反面的时候这样做显然有些累赘,但如果是多面内容可能就不同,这种方法或许更灵活些,当然现在小莫的技能还没点到那个级别,多面翻转的功能留着日后实现吧!
总结
一入css3深似海,从此XX是路人!(这里XX泛指各种动画插件,请自行脑补。)为什么总觉得没有个总结就不算是写完了呢?这是个不好的习惯,咳咳。(写小说凑字数留下的恶习,见谅见谅)
相关文章推荐
- css3实现色子自动翻转效果
- CSS3绘制三角形,并实现翻转效果
- CSS3 实现导航菜单的 3D 翻转动画效果
- CSS3实现翻转(Flip)效果
- CSS3实现徽章翻转效果
- CSS3 animate实现图片墙3D翻转效果
- 利用CSS3如何实现翻转卡牌效果?
- css3 实现纸带翻转效果
- CSS3实现翻转(Flip)效果
- CSS3实现翻转菜单效果
- css3实现色子自动翻转效果
- css3实现图片3d翻转效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 用CSS3实现类似苹果桌面的有趣抖动效果
- cocos2d 实现翻转效果
- 2011年最新使用CSS3实现各种独特悬浮效果的教程
- 用CSS3的 box-shadow 来轻松实现图层阴影效果
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- CSS3下的渐变文字效果实现