小莫碎碎念
小莫见到很多网站的图片翻转效果很炫，忍不住手痒痒，遂摩拳擦掌打算研究一番，无奈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泛指各种动画插件，请自行脑补。）为什么总觉得没有个总结就不算是写完了呢？这是个不好的习惯，咳咳。（写小说凑字数留下的恶习，见谅见谅）
4035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
