当鼠标滑过包含块时，元素整体
翻转180度，以
实现“正”“反”面的切换。
分析：.container，.
Flip为了
实现动画
效果做准备。.front,.back各包裹一张图片。
<div class="container">
<div class="front">
<img src="images/pic00.jpg" alt="">
</div>
<div class="back">
<img src="images/pic01.jpg" alt="">
</div>
</div>
</div>
1. 元素布局
为了
实现以上
效果，先进行元素布局。给.front,.back相对.
Flip进行绝对定位,让他们在相同位置重叠。
布局部分代码如下：
.container,.front,.back{width:380px;height:270px;}
.
Flip{position:relative;}
.front,.back{position:absolute;top: 0px;left: 0px;}
设置之后我们发现.back的图片在.front的上面，因此给.front设置.fornt{z-index:2;}
注意：不要为了防止元素溢出设置overflow属性，这将导致3D
效果无法
实现。
注意点：
/*
当为元素定义 perspective 属性时，其子元素会获得透视
效果，而不是元素本身。*/
/*注释：perspective 属性只影响 3D 转换元素*/
/*目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性*/
(1) 为了
实现动画
效果首先给祖先元素.container,.
Flip设置以下属性，以触发3d
效果和设置动画：
.container{perspective:1000;transform-style:preserve-3d;}
.
Flip{transition:0.6s;transform-style:preserve-3d;}
(2)接着，为了让图画
翻转时不露出背面，给.front,.back设置backface-visibility属性：
.front,.back{backface-visibility:hidden;}
(3)为了让
鼠标滑过包含块时，包含块
翻转180度，以
实现“正”“反”面的切换。给背面的元素设置transform:rotateY(-180deg)，这时我们将无法看到.back。
(4)最后，
当用户的
鼠标滑过.container包含块时,.
Flip翻转180度，这样，.front
翻转180度，由于背面是hidden，无法看见；而.back
翻转180度后，回到0度，以正面示人，这样我们就能看到背面了。
代码如下：
.container{perspective:1000;transform-style:preserve-3d;}
.container,.front,.back{width:380px;height:270px;}
.
Flip{position:relative;transition:0.6s;transform-style:preserve-3d;}
.front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;}
.front{z-index:2;}
./*
鼠标还没放上去之前*//*这里先让back
翻转180deg就看不到back的图片了*/
.back{transform:rotateY(-180deg);}
/*
鼠标经过的时候
Flip就
翻转180deg
翻转的图片由于是背面就看不见*//*但由于.back先
翻转了-180deg 所以
当他再次rotateY(180deg)的时候 他其实就是正面了即rotate(0)所以此时他能出现 */
.container:hover .
Flip{transform:rotateY(180deg);}
垂直
效果与水平
翻转异曲同工。但是如果你只是把rotateY换成rotateX,那么你会发现图片是以顶部的那条线
翻转的。
请注意：在上面的CSS代码中，我并未给.
Flip设置宽高，所以
当给.
Flip应用transform:rotateY(180deg)时，按照默认的transform-origin值，是以元素的中心点为基本点
翻转的。这里.
Flip的高度是0，所以
当然是以顶部的那条线为基础
翻转。所以解决的办法有二：
给.
Flip设置和.front,.back相同的宽高。
给.
Flip设置transform-origin:100% 135px/*高度的一半*/属性。
总结
1. 思路
（1）最外层元素设置perspective以
实现3D
效果。
（2）
当鼠标滑过最外层元素时，第二包裹层
翻转180度，同时设置过渡速度。
（3）两个
翻转块绝对定位，以致
实现相同位置的叠加。同时设置backface-visibility避免在
实现动画
效果时露出背面。
（4）给.front设置z-index属性使它在写代码和展示时都在前面。
（5）让.back最开始就
翻转180度，以背面示人。
2. 遇到的问题：
（1）为了让两个尺寸不一的图片在包裹块中大小一致，使用了overflow属性，无法
实现3d
效果。解决方法：给img设置width:100%;height:100%;
（2）没有意识到.
Flip的高度为0，所以在垂直
翻转时标准点错误导致
效果不一样。
（3）多写才能发现多的错误，才知道怎么找错误，怎么解决错误。
