css3图片翻转功能的实现

今天用了学习并且使用到了图片的3d翻转效果，下面简要整理一下实现的步骤：

1、先准备好HTML的三层嵌套，最内层要有两个块作为翻转的正反两面；

2、给最外层元素使用perspective属性定义，使得其子元素获得透视的效果；

3、利用hover属性使鼠标悬停在最外层元素时选中中间层作为选择器，让其利用transform:rotateX()或transform:rotateY()旋转180度；

4、改最外层和内层的两个元素设置相同的宽高；

5、利用transition属性指定中间层实现翻转的时间和使用transform-style:perspective-3d属性指定中间层的呈现方式为3d呈现并给中间层设置相对定位，还有要使用transform-origin属性指定旋转轴；

6、给内层的两个元素使用backface-visibility：hidden设置背面不可见以及设置成绝对定位的top和left为0；

7、用z-index：2指定初始要显示的那面内层元素；

8、让初始作为背面的内层元素使用transform：rotateX/Y（180deg）实现翻转。

由于时间原因，这里只写出描述内容，具体例子稍后给出。。。感谢您的阅读，期待您留下宝贵意见和建议。