实现翻页效果

如何使用CSS3 2D转换 实现翻页效果

实现翻页效果，我是使用CSS3 2D转换transforms允许移动、旋转、缩放和倾斜元素。

实现翻页效果

实现翻页效果的主要步骤主要是通过transform:rotate(-180deg)设置旋转的角度，鼠标经过transform:rotate(0deg)旋转回去，然后再设置旋转的中心点的位置，默认是center，这里我们设置旋转的中心点的位置为右下角transform-origin:right bottom；最后再将盒子溢出的部分隐藏overflow:hidden;