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

场景

今天群友提问实现一个堆叠效果，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。就可以实现堆叠的效果了。