是否可以使用 CSS 对元素进行自由变换 - 类似于网格变换?
我能得到的最接近的方法是使用类似 transform: perspective(400px) rotateY(45deg);
的三个元素,但我希望它是一个连续的 img
元素。
最佳答案
您可以考虑 3 个元素和 background-image
。诀窍是调整背景大小/背景位置以创建一幅连续图像的错觉。
悬停查看结果:
.box {
margin: 50px auto;
width: 200px;
height: 200px;;
background-size: 300% auto;
background-position: center;
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background-image: inherit;
background-size: 300% auto;
transform: perspective(800px);
transition: 0.5s all;
}
.box:before {
right: 100%;
background-position: left;
transform-origin: right;
}
.box:after {
left: 100%;
background-position: right;
transform-origin: left;
}
.box:hover::before {
transform: perspective(800px) rotateY(50deg);
filter: brightness(0.8);
}
.box:hover::after {
transform: perspective(800px) rotateY(-50deg);
filter: brightness(0.8);
}
<div class="box" style="background-image: url(https://picsum.photos/id/1/1000/800)">
</div>
关于html - CSS 网格透视/变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56688288/