CSS3 之实现超酷图片墙动画

写在前面

---

之前都是在学习 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 层级使其顶层显示。

最后的效果如下

转载于:https://juejin.im/post/5bbec87ff265da0aee3f3593