默认图片rotateY=0;鼠标指向为rotateY=-180，负数，也就是逆时针绕y轴旋转，正数，则为顺时针；其他两个轴同理；鼠标指向时：图片（div:first-child），从0度绕y轴逆时针旋转180度到达-180度；介绍（div:last-child）从180度绕y轴逆时针旋转180度到达0度。造成两个一起逆时针旋转的效果。有人可能会问为啥介绍默认不是0度，这里注意下，介绍逆时针旋转180度之后是正面状态，所以当倍图片遮盖时，相当于从正常状态顺时针旋转了180度，因为鼠标指向时需要恢复正常状态。
四、源代码下载
五、总结
CSS3提供了很多新的诸如transform这样的特性，我们用这些特性的时候可能只能兼容新的浏览器，对IE6、7、8这样的老古董兼容不是很好，但是这就足够了，比如上面的例子，在IE6、7、8这些浏览器中不显示特效，只显示图片，也不难看，在其他浏览器对HTML5和CSS3兼容比较好的浏览器中，可以看到特效。避免了使用过多的JS，同时达到了在新式浏览器中显示酷炫的效果。
您可能感兴趣的文章: