Можно ли с помощью CSS3 произвести такую трансформацию?

Question

[ChemAli]

Пытался сделать с помощью transform: skew(x,y), но их нельзя комбинировать и у меня получались только ромбы с паралеллограммами. Нужно из прямоугольника получить трапецию с заданными углами:




Долгих лет жизни и хорошую жену тому, кто подскажет как сделать это без преобразований на стороне сервера.

Comments

[ChemAli]

Операции производятся над изображением. Пусть для простоты понимания это будет обложка книги, которую хочется показывать в перспективе.

[sskalmykov]

Только используя один блок, или же можно использовать несколько? 2 или 3?
С 3мя блоками очень легко решается.

[sskalmykov]

прошу прощения, не прочитал уточнение, т.к. писал вопрос. Вопрос снят. Можно использовать только один блок.

Answer 1

[tFirma]

Для webkit'а можно так: -webkit-transform: perspective(200px) rotateY(45deg);
Пишут, что в других браузерах трехмерные трансформации не поддерживаются: www.w3schools.com/cssref/css3_pr_transform.asp

Answer 2

[tFirma]

А если нарисовать два прямоугольника и сдвинуть в противоположные стороны?

Comments

[ChemAli]

Не понял, тчо вы имеете в виду. Можете нарисовать?

[tFirma]

Как-то так (красный параллелограмм перекрывает серый):

[tFirma]

Теперь, после вашего уточнения, понимаю, что такой способ не подойдет.

Answer 3

[Анатолий]

Может стоит использовать канвас?