纯css实现图片倾斜堆叠效果

场景

今天群友提问实现一个堆叠效果，ui如p1，刚好无聊，自己写了下。效果如p2。当然细节都没有调，仅提供一个堆叠效果的思路。

ui的：

 demo实现的：

 实现

大致思路是先将图片裁成梯形，后使用transform进行旋转。起初试过矩形，效果并不理想。

1、将图片以梯形形状展示

主要使用了遮罩图的概念。效果如下：

代码如下：

 主要用到的是mask-image这个属性，具体的遮罩图我也贴一下，什么颜色都可以，这里为了方便显示我着色了一下。这个梯形是我用ps自己画的，很简单，导出png就行了。尺寸和css里的保持一致100px*100px的。

 2、旋转

其实也是补充一下1中的css样式，完整的如下：

  .test {width: 100px;height: 100px;background-image: url('../../assets/IMG_4194.JPG');background-size: contain;background-repeat: no-repeat;-webkit-mask-image: url('../../assets/mask.png');position: relative;z-index: 10;transform: rotateX(70deg);}

 用relative主要是为了让它叠在顶部，为了方便设置z-index。下面的图可以类似步骤，设置不同的z-index。就可以实现堆叠的效果了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！