纯CSS3图片反转

　　一些简单实用的小技巧，CSS3对图片进行翻转，显示另一面的文字，或者图片效果，那么具体怎样去做呢？一起来看看吧。

　　在CSS3中，可以使用transform-style: preserve-3d进行3d的转换。那么具体怎么用呢？

　　首先来看HTML部分：

　　

　　先使用一个大的div把想要显示的正面和反面内容正常显示出来，设置好需要的宽高。在大的div中包含要变换的内容，所以需要在父元素，即.fox类中设置transition-style来进行3d变换。这种变换不是一下就直接完成的，所以使用transition设置一个变换的时间。然后当鼠标移动到大的大div块上的时候，进行Y轴的180deg变换。在这里显示文字的div进行翻转后，文字的颠倒过来的，所以需要对文字div初始状态设置一个rotateY(180deg)，这样文字就会翻转过来就是正常的状态。

　　

　　然后我们需要对两个子div进行设置层定位。首先我们在父div中设置一个相对定位，然后对两个子div设置绝对定位，使其在原有文档流的定位丢失，这样他们就会层叠在一起。

　　效果图如下：

　　初始状态：翻转后：