CSS3打造百度贴吧的3D翻牌效果示例

1、最主要的是理解rotateY ，绕y轴旋转，rotateY字面上看绕y轴旋转，肯定有人问y轴在哪：

默认旋转元素的中心点就是旋转中心（可以通过transform-origin修改），x，y轴都在图上，z轴是从中心往外发的箭头（就是屏幕射向你头的箭头）。

我们例子中，默认图片rotateY=0;鼠标指向为rotateY=-180，负数，也就是逆时针绕y轴旋转，正数，则为顺时针；其他两个轴同理；

我们例子的核心就是鼠标指向时：图片（div:first-child），从0度绕y轴逆时针旋转180度到达-180度；介绍（div:last-child）从180度绕y轴逆时针旋转180度到达0度。造成两个一起逆时针旋转的效果。有人可能会问为啥介绍默认不是0度，这里注意下，介绍逆时针旋转180度之后是正面状态，所以当倍图片遮盖时，相当于从正常状态顺时针旋转了180度，因为鼠标指向时需要恢复正常状态。

perspective，有个技巧，对于舞台（动画的父元素）设置。

transform-style对3d变化当然是3d了，没啥好说的。

关于CSS3的3d效果相关的属性，还有很多，有机会以后的例子会刻意使用没有用过的~

源码点击下载。。

欢迎大家指教~对了，该例子需要在chrome下运行，firefox貌似支持不是很好，自动用了chrome，firebug也很少用了~嘿嘿~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。