Сделать превю картинок в перспективе?

Question

[Kusmich]

Нужно сделать превю картинок в перспективе. И чтоб потом была возможность сделать зацыкленое движение как будто картинки (отдаляются и приближаются)

Ниже приложу скрин шот , чтоб было понятно о чем толкую :

Может есть библиотека , для этого или кто такое делал подскажите как это реализовать ?

Comments

[DevMan]

Kusmich нафига в каждом вопросе лепить тег "JSON".

[Kusmich]

DevMan : Незнаю

Answer 1

[Илюша Прокопьев]

Для перспективы используй transform в css (погугли, там достаточно много, так сходу не объяснить). А для движения: создай псевдоклассы и поочерёдно активируй их через setInterval в JS.

Answer 2

[Pavel Torbeev]

Перспективу можно реализовать стандартными средствами CSS. С помощью свойства transform
Даже демо есть

Answer 3

[Radiks Alijevs]

Посмотрите в сторонe Show Stack, судя по вашему превью, наиболее подходящий пример (google code)

Answer 4

[0leg5ergeev]

Ещё могу такое скинуть www.simpleviewer.net/tiltviewer/app

Answer 5

[Павел Радьков]

Попробовал сверстать codepen.io/paulradzkov/pen/vNrBEa/?editors=110

Но я бы не стал такое в продакшене использовать: тяжелое для рендеринга решение, кулеры в ноутбуке завывают.
Надо или оптимизировать или переделывать целиком на canvas (может на канвасе будет меньше нагрузка на рендеринг).

UPD: Смешанный вариант:
1. На канвасе сгенерить фон, например 12×12 картинок. Или на серверной стороне. Или просто заготовить заранее.
2. Применить фон к наклоненному диву (замостить этим фоном).
3. Анимировать background-position.
4. Profit: ничего не тормозит. codepen.io/paulradzkov/pen/yYENOO?editors=110