小莫的成神之旅（二）纯css3实现翻转效果

来源：互联网发布：淘宝客关闭返利编辑：程序博客网时间：2024/05/21 13:56

小莫碎碎念

小莫见到很多网站的图片翻转效果很炫，忍不住手痒痒，遂摩拳擦掌打算研究一番，无奈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             front65         </div>66         <div class="back">67             back68         </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泛指各种动画插件，请自行脑补。）为什么总觉得没有个总结就不算是写完了呢？这是个不好的习惯，咳咳。（写小说凑字数留下的恶习，见谅见谅）

1 0