写在前面

之前都是在学习 CSS2 的一些特性，今天硬着头皮尝试了一下 CSS3 的东西。没想到也有意外收获。就是 transition 这个属性，实现的效果令人赏心悦目，甚至比 flash 动画看着还舒服，也非常简单，几行代码的事。

在 CSS3 中，实现旋转效果需要使用到 transform 属性中的 rotate 属性，实现阴影效果需要使用 box-shadow 属性。如：

 transform: rotate(10deg)box-shadow: 2px 2px 2px rgba(125, 125, 125, 0.5)
复制代码

transform 中文意思为转换，它是一个复合属性，其中 rotate 表示旋转，其他一些属性如scale-尺寸放大缩小，skew 表示倾斜角度，translate表移动距离。

上例中， rotate(10deg) 表示顺时针旋转 90 度，如果是负的，就是逆时针旋转。 box-shadow 中第一个 2px 表示水平偏移，2px 是投影向右偏移 2px，第二个是垂直偏移，同样是向下偏移 2px。第三个参数表示模糊的大小，第四个参数为颜色值。

使用 transition 给单个图片添加悬停动画

刚才 transform 属性可以让图片发生旋转，例如可以配合伪元素 hover 让图片旋转。当这样的效果很生硬。可以配合 transition 让它实现悬停动画。

.pic{display: block;transform: rotate(10deg);width: 256px;margin: 60px 0 0;padding: 10px 10px 15px;text-align: center;background: #fff;border: 1px solid #bfbfbf;box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);transition: all 0.5s ease-in}
.pic:hover {transform: rotate(0deg);
}
复制代码

最关键的部分就是 transition: all 0.5s ease-in。表示的意思就是所有的属性都执行过渡效果，像角度啊，投影大小，边框色或是下面要讲到的比例啦等，执行时间为0.5秒，过渡动画类型为先慢后快。

旋转拉近动画效果

这里的使用更加酷炫了，鼠标经过图片，图片不仅旋转，而且图片的投影拉长，图片的比例变大，形成了从墙面浮起来的酷炫效果。

.pic {display: block;padding: 10px 10px 15px;position: absolute;text-align: center;background: #FFFFFF;border: 1px solid #bfbfbf;box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);transition: all 0.5s ease-in;z-index: 1;
}.pic:hover {border-color: #9a9a9a;box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);transform: rotate(0deg) scale(1.05);z-index: 3;
}
复制代码

这里仅仅对 hover 做了改变，让 box-shadow 的阴影更长，scale(1.05) 表示大小为原来的 1.5 倍。这些都是以动画的形式显示的，于是就有了从墙面上浮起来的效果。 每张图片所在的 a 标签采用绝对定位，鼠标经过时改变 z-index 层级使其顶层显示。

最后的效果如下