Как создать галерею изображений с изогнутыми краями? [закрыто] ⇐ CSS

[Anonymous]

Меня попросили создать страницу с использованием CSS/html на основе дизайна.
Вот фоновое изображение дизайна
Предварительный просмотр
Я прочитал занимаюсь преобразованиями в css, но на данный момент не могу выполнить это требование самостоятельно.
Я пытаюсь добиться эффекта в изображении предварительного просмотра с помощью 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 ... ith-curved