如何重新创建"leaning" CSS 界面？

Question

我想用HTML和CSS创建一个这种风格的界面：https://i.pinimg.com/originals/df/1c/11/df1c11c2ec58fce1e8c226bf85ca3a60.jpg

到目前为止，我有一个看起来像这样的界面：https://i.ytimg.com/vi/B6vhIXDIdMc/maxresdefault.jpg

这些是说明性的图片，但正如你所看到的，我的界面不像图像中的界面那样倾斜。它没有我想通过CSS重新创建的"屏幕上的界面"方面。

我尝试使用倾斜，但无济于事。 你知道我怎样才能重现这种效果吗？

提前谢谢。

Answer 1

参数可以自行调整。

div{
width: 300px;
height: 200px;
background: red;
margin: 100px auto;
text-align: center;
perspective: 400px;
}
img{
width: 300px;
height: 200px;
background: yellow;
display: inline-block;
transition: transform,0.8s;
transform-origin: center bottom;
}
img:hover{
transform: rotateX(-20deg) rotateY(-30deg) rotateZ(-20deg);
}

<div>
<img src="https://i.pinimg.com/originals/df/1c/11/df1c11c2ec58fce1e8c226bf85ca3a60.jpg"></img>
</div>