场景
今天群友提问实现一个堆叠效果，ui如p1，刚好无聊，自己写了下。效果如p2。当然细节都没有调，仅提供一个堆叠效果的思路。
ui的：
demo实现的：
实现
大致思路是先将图片裁成梯形，后使用transform进行旋转。起初试过矩形，效果并不理想。
1、将图片以梯形形状展示
主要使用了遮罩图的概念。效果如下：
代码如下：
<div class="test" /><style>.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');}</style>
主要用到的是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。就可以实现堆叠的效果了。
