Как сделать наклон блока в 3D с помощью CSS?

Question

[WebforSelf]

Есть такие 2 блока, справа слайдер, слева статика.



Вот думаю как их развернуть чтоб выглядели как на макете, с помощью transform не получилось.

Думал через clip-path , но справа будет слайдер, и там изображение должно повернуто быть , чуть боком , вместе с блоком.
Может кто сталкивался?

Comments

[Lord_Dantes]

с помощью transform не получилось.

https://html5book.ru/3d-transform/

[WebforSelf]

Lord_Dantes, спасибо - попробую. Но так как блок не ровный, думаю что нужно сделать clip-path в потом его повернуть с помощью transform? как думаете?

[ReActor Дмитрий Вершанский]

WebforSelf, блок ровный, подобная геометрия - результат изменения перспективы объекта

[WebforSelf]

Re{Actor} Дмитрий Вершанский, нет какого нибудь генератора чтоб выставить углы? как вообще выставлять из PSD? что то искал гайды, нет. На глаз высчитывать?

[ReActor Дмитрий Вершанский]

WebforSelf, вариант

[Softlink]

Недавно был похожий вопрос

Answer 1

[ReActor Дмитрий Вершанский]

Изучите понятие трансформации как следует.
Необходимые в вашем случае свойства:

perspective
transform: skew()
transform: rotate()