Pure css realizes the image tilt stacking effect

Scenes

Today, the group of friends asked questions to achieve a stacking effect, the ui is like p1, just boring, so I wrote it myself. The effect is like p2. Of course, the details are not adjusted, only to provide an idea of ​​stacking effect.

UI:

 

 The demo implements:

 

 accomplish

The general idea is to first cut the picture into a trapezoid, and then use transform to rotate it. Tried rectangles at first, didn't work well.

1. Display the picture in a trapezoidal shape

The concept of a mask map is mainly used. The effect is as follows:

 

code show as below:

<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>

 The attribute mask-image is mainly used. I will also post the specific mask image. Any color is fine. Here I colored it for the convenience of display. This trapezoid is drawn by myself with PS, it is very simple, just export png. The size is consistent with the 100px*100px in css.

 2. Rotate

In fact, it is also to supplement the css style in 1, which is complete as follows:

  .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);
  }

 The main reason for using relative is to let it stack on top, and to set z-index for convenience. The following figure can be similar to the steps, setting different z-index. The effect of stacking can be achieved.