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