Как создать панораму «рыбий глаз» с помощью css3? - PullRequest
4 голосов
/ 26 декабря 2010

Я чувствую, что пришло время конвертировать мои флэш-панорамы в js / html5 / css3. Я видел некоторые изящные решения, использующие отдельные плоские изображения, но мои все "рыбий глаз" ...

Моя интуиция говорит мне, что это выполнимо с помощью -webkit-transform: matrix3d, но я не совсем в этом разбираюсь.

Есть идеи, если это действительно можно сделать в css3?

Спасибо, любезно.

Ответы [ 2 ]

1 голос
/ 30 декабря 2013

Я обнаружил three.js .

Это выглядит многообещающе.

1 голос
/ 26 декабря 2010

Да, это можно сделать, но вы лучше знаете свою математику.Обратите внимание, что вы используете не CSS3, а проприетарное расширение, это будет работать только в браузерах webkit.Вам, вероятно, будет лучше использовать элемент Canvas для этой работы, он не только поддерживается большим количеством браузеров, но и дает вам гораздо большую свободу для любых преобразований, которые вы пожелаете.затем нарежьте ваше изображение на несколько тонких вертикальных срезов, каждый срез должен быть масштабирован примерно на 1 / cos ([угол от центра]) и перекошен для учета различий угла с правой и левой стороны среза,Таким образом, у вас должна получиться форма «обратный рыбий глаз», в которой верх и низ изображения вогнутый, возможно, вы захотите обрезать его до квадрата.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...