Как воссоздать "наклонный" интерфейс 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>