Как в CSS сделать перспективу таким образом (transform)?

Question

[Борис Белов]

Доброго дня.



Делаю макет с GIF анимацией, но само изображение с лептопом 1400*600 пикселей, и понимаю что будет весить порядка 3-4 мегабайт.

Думаю сделать иначе. Саму картинку с лептопом сделать через JPG.
А GIF с изображением на мониторе сделать отдельно, но развернуть в CSS.

Понимаю что это делается как то через transform: rotateY( -25deg ); но этого параметра мало.
Кто сможет помочь?

Вот такая форма должна получиться



---

Максимально что получается в данном случае это

Comments

[kulaeff]

Имхо, достаточно будет использовать transform(x,y), perspective и perspective-origin, просто надо поиграться с параметрами.

Answer 1

[aloky]

В гугл вбей) transform generator online

Comments

[Борис Белов]

enjoycss.com/start#transform типа того?

[aloky]

Борис Белов, Да

[Борис Белов]

aloky, upd.

[aloky]

Борис Белов, perspective поможет https://puzzleweb.ru/css/pr_perspective-origin.php

Answer 2

[Кирилл]

https://developer.mozilla.org/en-US/docs/Web/CSS/t...

Comments

[Борис Белов]

Кирилл Кубляков upd.