CSS3 动画：水平翻转

首先，我们在网页里面放置 3 个图标。

相应的 html 代码为：

<span class="mega-octicon octicon-mortar-board anim-flip"></span>
<span class="mega-octicon octicon-eye anim-flip"></span>
<span class="mega-octicon octicon-globe anim-flip"></span>

然后，我们做一个特效：当鼠标滑过图标时，让这几个图标水平翻转。

CSS3水平翻转

.anim-flip:hover {
    animation: 0.35s linear 0s alternate none 1 featuresicon;
    -webkit-animation: 0.35s linear 0s alternate none 1 featuresicon;
    color: #4183C4;
}
@keyframes featuresicon { 
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@-webkit-keyframes featuresicon { 
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}

如需在 CSS3 中创建动画，需要使用 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

animation: 0.35s linear 0s alternate none 1 featuresicon;

上面的这一行，我们定义了 featuresicon 规则。由于不同浏览器对 CSS3 的支持不同，因此我们在下面的代码中，定义了 2 个 @keyframes 规则。

transform 用来进行 2D 和 3D 转换。通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

因此，我们使用：

50% {
   transform: scaleX(0);
}
100% {
   transform: scaleX(1);
}

可以实现水平翻转。