Как создать изогнутую галерею 3D-изображений？ ⇐ CSS

[Anonymous]

Меня попросили создать страницу с помощью CSS/html на основе этого дизайна.
Я читал о преобразованиях в CSS, но не могу понять, как это сделать. примените преобразования к этому дизайну. Я попытался использовать свойство RotateY(), чтобы получить эффект трапеции для одного изображения, но не знаю, как применить преобразование ко всей галерее в целом.
Это код, который я пробовал:

Код: Выделить всё

[img]./imgs/carousel01.png[/img]
[img]./imgs/carousel02.png[/img]
[img]./imgs/carousel03.png[/img]
[img]./imgs/carousel04.png[/img]
[img]./imgs/carousel05.png[/img]
[img]./imgs/carousel06.png[/img]



.row div:nth-of-type(1) img {
transform: perspective(700px) rotateY(20deg) scale3d(1.2, 1.2, 1.2)
}
.row div:nth-of-type(2) img {
transform: perspective(700px)rotateY(10deg) scale3d(1.1, 1.1, 1.1)
}
.row div:nth-of-type(3) img {
transform: perspective(700px) rotateY(0deg) scale3d(1, 1, 1)
}
.row div:nth-of-type(4) img {
transform: perspective(700px) rotateY(0deg) scale3d(1, 1, 1)
}
.row div:nth-of-type(5) img {
transform: perspective(700px) rotateY(-10deg) scale3d(1.1, 1.1, 1.1)
}
.row div:nth-of-type(6) img {
transform: perspective(700px) rotateY(-20deg) scale3d(1.2, 1.2, 1.2)
}

Код дает такой результат. Очевидно, это не соответствует дизайну.

Подробнее здесь: https://stackoverflow.com/questions/784 ... ge-gallery