第一种方式：
首先，我们在html中有这样一个布局：
不要小看外面那个div，它可是本次内容不可少的呢，没了它，后面的效果就没法实现了呢!局布好了，接下来就要开始搞样式了。最先要搞的肯定是外面的哈，给它一个width,height,大少各位大神自己定吧，小妹我这就先给它定个200*200吧。外面的搞定了，里面的也要开始了，这里都是给200*200。此时在浏览器中一看发现div1和div2是上下显示的，一个上一个下，这就对了，要知道div是块元素，它要占据一整行的呢，但这对我们之前说的前后肯定是有矛盾的，不要急，给它一个绝对定位position: absolute;这样两个div的中心就重合啦。为了区别两个div,这里我们要分别给它们不一样的背景色。前期准备工作都差不搞定了，接下来我们来看看怎么样实现效果吧！
我们是要实现翻牌效果，一听就知道肯定是要有旋转的，这就要用到css3里的新属性transform:rotateY(?deg);有人有可能会问为什么是rotateY呢，这你就不知道了吧，翻牌，当然是沿着Y轴转啊，哈哈！所以当鼠标移到div上时我们就要让它实现旋转效果，那么此时外层div的用处就来啦，不管用哪个小div都无法让它们同时发生旋转，除非我们的鼠标是点在外面那个div上，于是就有这个代码了，
.outer:hover .div1{
transform:rotateY(-180deg);
}
.outer:hover .div2{
transform:rotateY(0deg);
}
旋转是有了，可是没有任何过渡效果的旋转看起来是很难看的，所以在这里，我们要给它们一个过渡效果，就要用到css3里的新属性transition:all 2s;此处的all是它所有的效果都过渡。讲到这里我们其实一直都没处理一件事，那就是怎么让当前面的旋转到后面，后面的紧跟其后出现， 这就是backface-visibility:hidden;一个在图片变换里很重要的一个属性，它的意思是当图片转到显示屏看不见的地方就消失了。就是说本来是正面的， 我们能看么到，但是当它沿着Y轴转180度后我们就不能看到它了，如果不加这个属性我们是能看到旋转后的反图片的，加了它就看不到了。所以我们要把这个属性加到两个小div上。而且为了实现此效果，我们在开始的时候还得让两个小div一个没有旋转，我们能看到，另一个也就是在背后的那个放转180度，这样当第一个div 开始旋转后我们就不会立即看到第二个div，而是等它旋转到看不到的地方，第二个div 才会出现。具体代码如下所示：
第二种方式：
翻牌的原理：
1、父容器设置设置perspective，让其子元素支持3d透视。
注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
2、牌正面和背面设置absolute属性，让正面的背面处于同一水平线上，用z-index属性设置背面朝上
3、让背面设置translateY(180)，沿y轴旋转180度，背面朝后，backface-visibility属性让背对屏幕的时候隐藏隐藏。
4、hover属性，当鼠标经过flip_wrap时，让flip沿y轴旋转180度，让正面绕y轴旋转180度到背面隐藏，背面沿y轴旋转180转到正面来。
原理就是这样，下面就开始看具体代码吧。
.flip_wrap{width:210px;height:220px;margin:0 auto;perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;}
.flip{width:210px;height:220px;backface-visibility:hidden;/*背对屏幕时隐藏*/-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;transition:all 1s ease;/*为翻牌添加过渡效果*/-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transform-style:preserve-3d;/*子元素将保留其 3D 位置。*/}
.side{width:100%;height:100%;position:absolute;/*让背面和正面重叠*/left:50%;margin-left:-105px;}
.front{z-index:2;/*让正面朝上*/}
.back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}.flip_wrap:hover .flip{transform:rotateY(180deg);(180);
-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}
翻牌body,div{margin:0;padding:0;}.flip_wrap{width:210px;height:220px;margin:0 auto;perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;-o-perspective:800px;}.flip{width:210px;height:220px;backface-visibility:hidden;/*背对屏幕时隐藏*/-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;transition:all 1s ease;/*为翻牌添加过渡效果*/-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transform-style:preserve-3d;/*子元素将保留其 3D 位置。*/}.side{width:100%;height:100%;position:absolute;/*让背面和正面重叠*/left:50%;margin-left:-105px;}.front{z-index:2;/*让正面朝上*/}.back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}.flip_wrap:hover .flip{transform:rotateY(180deg);(180);
-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);}
