Css3之翻牌效果

以前没有认真了解过css3，现在回头看看才知道自己有多么的无知，一直想着用3d做炫酷的旋转效果却从没深究过css3的属性，没为我所用。其实3d的翻转效果，就是两张图片重合起来，一张在前面，一张在后面，当前面图片旋转到一定的角度时，就会隐藏起来，显示后面一张图片，两张图片一起旋转，但看不出有两张图片在旋转的效果。是不是很期待了，那我们一起快来学习下吧。
在HTML中布局很简单，外面套一层盒子作为基底，它是必不可少的，如果没有了它后面的效果就很难实现了。在这里用了两种不同方向的翻面效果，即是rotateX、rotateY两个不同轴的旋转方向；控制它旋转还得transform出场，单单是它还是不可以的，不能保证其3d的旋转效果，需要改变其旋转的样式。但是怎么改变呢？只需在外层盒子上加transform-style 属性规定如何在3d空间中呈现被嵌套的元素，该属性必须与 transform 属性一同使用。transform-style的默认值为flat子元素将不保留其3d位置，另一个为preserve-3d子元素将保留其3d位置。backface-visibility定义元素在不面对屏幕时是否可见。backface-visibility默认值visible背面可见的，另一个值hidden背面不可见的。在这里所用到的都是改变它的默认值，实现后面的效果。HTML的布局很简单，代码如下截图：
布局好HTML，需要css的样式控制才能有下一步的进程。position: absolute;使正背两面重合，transform-style: preserve-3d;子元素将保留其3d位置，backface-visibility: hidden;背对屏幕时隐藏，transition:all 2s ease;给翻面添加过渡效果，以及宽高、边框属性等。一起看效果截图，如下：
用伪类hover鼠标移入执行效果，通过旋转到一定的角度，即在屏幕的看不到处隐藏一面，在屏幕看到的一幕显示一面。Css的代码如下截图：