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);
}

可以实现水平翻转。