CSS3兑现图片动画效果

CSS3实现图片动画效果
今天要介绍的 WordPress 效果是用 CSS3 实现鼠标悬停动画，这是从老肥博客那 里挖来的，是个专业级玩家，童鞋可以自行前往淘淘宝，会有更多发现的。当然，这个 CSS3 悬停动画效果并不只是适用在 WordPress 下的，我只是顺手拿 WordPress 举个例子。并外可惜的是 IE 浏览器还停留在 CSS2.1 的级别，暂时与这个效果无缘，所以只有用 Firefox 或者 Chrome 浏览器的读者朋友才能欣赏到本文中用 CSS3 实现的鼠标悬停动画效果。

将鼠标悬停到左侧图片上，你就会发现这个效果的奇妙之处了，当然这只是鼠标悬停动画效果的一个例子。如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：
a img {
opacity: 0.8;
-webkit-transition: all 0.2s ease-out;
}

a:hover img {
opacity: 1;
-moz-transform: scale(1.05) rotate(2deg);
-webkit-transform: scale(1.05) rotate(2deg);
}

如果要求仅应用于 的图片，则将选择器改为：
a img.logo {…}
a:hover img.logo {…}

如果要求应用于 id=”footer” 的 div 下所有图片，则将选择器改为：
#footer a img {…}
#footer a:hover img {…}

到这里，所有的工作都完成了，挺简单吧？下面进入详细分析说明。

transform: 形变目标值设定

兼容浏览器：Firefox 3.5、Chrome 2.0、Safari 3.1
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);


Life Studio
上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法，想要深入把玩可参考 Animation Using CSS Transforms.

transform-origin: 形变中心点设定

兼容浏览器：Firefox 3.5、Chrome 2.0、Safari 3.1
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;

默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角)：
Life Studio


Life Studio

transition: 过程动画设定

兼容浏览器：Chrome 2.0、Safari 3.1
-webkit-transition: all 0.2s ease-out;

-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画，包括 transform, opacity; 后面两项是时间和时间轴曲线。

OK，就介绍到这里，本文效果没有用全局控制，效果仅在本文有效，喜欢的朋友就直接扒源码吧。