css3 图片对角线收缩 |上下翻转效果css3

首先呢，大家需要用到CSS3的线性渐变，用它来创建图片的对角线。这样做不仅可以制造动态的斜线，而且能够使现有的斜线比较平滑。

.img {
width: 300px;
height: 300px;
background: linear-gradient(to bottom right, transparent 50%, #000 50%),
linear-gradient(to top left, transparent 50%, #000 50%);
}

上面这个代码块中，大家用了到了两个线性渐变，一个从左上角到右下角，一个从右下角到左上角。这就创造出了一个四方形区域，其中有一个交叉的对角线。

接着，大家再使用transform对这个图片进行倾斜，把它变成一个菱形。

.img {
transform: skew(-45deg);
}

最后一步就是，将大家创造的菱形区域放入一个DIV容器中，然后设置overflow:hidden属性，就可以实现对角线收缩的效果了。

.container {
width: 300px;
height: 300px;
overflow: hidden;
}

好啦，一个图片对角线收缩的效果就被大家实现啦，看起来是不是超级有设计感呢？