用CSS实现页面或图片翻转的动画效果

Web开发中常常会有动画的交互效果，以前我们只能用JavaScript来实现，随着浏览器对CSS3新特性的支持度越来越好，很多的特效都可以通过CSS代码来实现。

我们在浏览网站的时候，经常能够看到图片会翻转的动画效果，比如Demo 1所示。

正面内容

反面内容

能否用纯CSS来实现这种翻转动画效果呢？答案是肯定的。

我们知道CSS3的transform属性非常强大，可以实现2D或者3D的旋转、缩放、移动或倾斜。

上述Demo1是沿着Y轴3D翻转的，我们可以想到用transform属性的rotateY()方法来实现。

示例代码

HTML代码

<div class="rotate-container">
    <div class="flipper">
        <div class="front">
            <!-- 前面内容 -->
        </div>
        <div class="back">
            <!-- 背面内容 -->
        </div>
    </div>
</div>

CSS代码

.rotate-container:hover .flipper{
    transform: rotateY(180deg);
}

.rotate-container, .front, .back {
    width: 320px;
    height: 480px;
}

.flipper {
    transition-duration: 1s;  
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
}

.back {
    transform: rotateY(180deg);
}

关键的技术点解释：

1.transform：变形

transform: rotateY(180deg) 表示沿着Y轴旋转180度。

Demo2：沿着Y轴旋转180度(旋转到背面可见)

Demo3：沿着Y轴旋转90度

Demo4：沿着Y轴旋转45度

2.transform-style：指定该元素的子元素所在空间。

指定该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

transform-style属性有两个参数，flat和preserve-3d。flat为默认值，指定子元素位于此元素所在平面内; preserve-3d指定子元素定位在三维空间内。

3.backface-visibility 指定元素旋转到背面时是否可见。

默认为visible，即背面是可见的, 如Demo2所示。

在Demo1中，由于翻转过来的是另外一张图片，所以设置为backface-visibility:hidden背面是不可见的。

Demo5: 沿着Y轴旋转180度(旋转到背面不可见)

4.transition-duration：表示完成过渡效果需要花费的时间。

transition-duration：1s可以用简写的形式transition:1s。

5.position:absolute：绝对定位。

使用绝对定位position:absolute把翻转前后的两个元素摆放到同一个位置。