CSS3 transform3D 图片翻转效果

经常能在展示案例logo的时候见到。logo原本是黑白色，鼠标移入时logo翻转成为彩色。

一、实现一张图片的翻转

一、HTML结构

<div class="stage">
    <div class="flipBox">
        <figure class="pic front">Front</figure>
        <figure class="pic back">Back</figure>
    </div>
</div>

上述HTML的结构是：

• div.stage规定了一个3D舞台，基本上所有使用CSS3 3D变换的实现都会这么做，规定perspective样式从而达到透视效果
• div.flipBox是真正实现翻面的容器，稍后将对它进行3D变换
• figure代表两张图片，一张是正面，一张是背面

思路是：将figure.front和figure.back作为翻转图片的正反面。图片翻转后，figure.back将变成面对用户的那一面，figure.front将背对用户。

初始状态下figure.back是水平翻转过的（即transform: rotateY(180deg)），这样图片翻转后背面的文字将正着显示（否则翻转过来以后背面的文字是倒着的——因为反转之前是正着的嘛~）。

二、CSS结构

body,figure {
    margin: 0;
    padding: 0;
}
.stage {
    width: 200px;
    height: 100px;
    margin: 40px;
    perspective: 1000px;
}
.flipBox {
    width: 200px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.pic {
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    background: #f00;
}
.back {
    background: #090;
    transform: rotateY(180deg);
}

现在分析每个元素的CSS：

body,figure {
    margin: 0;
    padding: 0;
}

没什么好说的，去掉内外边距！

.stage {
    width: 200px;
    height: