CSS-преобразования с перспективой возможны только с Safari на данный момент. Увы, Chrome, хотя и основанный на Webkit и, по-видимому, поддерживающий надлежащие атрибуты CSS, не будет применять преобразования перспективы. Они будут поддерживаться в какой-то момент в Firefox, без понятия о IE.
Ваш единственный другой вариант действительно <canvas>. Однако, как и в случае CSS-преобразований, API-интерфейс canvas предоставляет функции только для «2D» аффинных преобразований (масштабирование, вращение, наклон). При этом лучшее, что вы можете получить, - это изометрическая перспектива, поскольку это может быть достигнуто простым перекосом.
Однако, поскольку canvas дает вам контроль над изображением на уровне пикселей, вы можете подделать перспективу, хотя это сложно. Очевидным способом является использование функции putImageData и вычисление каждого пикселя с использованием матрицы трехмерного перспективного преобразования. Очевидно, вам нужно знать кое-что о линейной алгебре и тригонометрии. Независимо от ваших математических навыков, выполнение 3D-преобразований на таком низком уровне чрезвычайно затратно с точки зрения производительности и сильно варьируется между различными браузерами (Chrome - самый быстрый на сегодняшний день, Firefox будет работать с довольно низкой частотой кадров, а Safari находится где-то посередине ).
Лучшее решение с точки зрения производительности, но такое же сложное и интенсивное по математике, заключается в использовании drawImage для рисования изображения / текста / чего угодно, чтобы создать холст по одной строке за раз, и между каждым изменением значений преобразования масштабирования холста. Это именно тот метод, который использовался для получения перспективы на SNES в режиме 7, который изначально поддерживал только 2D-преобразования.
Другой метод подробно описан здесь.
Как вы можете себе представить, ничего из этого не тривиально, а производительность в лучшем случае нестабильна. Поэтому, если вы не желаете углубляться в документацию по API линейной алгебры, тригонометрии и холста, я бы сказал, что вам в значительной степени не повезло. Любая библиотека JS, которая выполняет ваши требования, подчиняется всем этим ограничениям. Я знаю несколько демонстраций, но ни одну из них нельзя было бы назвать библиотекой (хотя, если кто-то что-то знает, я был бы рад исправить).
Если кого-то интересуют сумасшедшие детали любого из упомянутых мною подходов, я был бы рад попытаться изложить их более подробно. В то же время вы можете поиграть с моей собственной демонстрацией, которая использует комбинацию первых двух техник, которые я указал.
http://bigmooworld.com/pwings/pilotwings/pilotwings.html
Некоторые из вас могут узнать это ...
Используйте WASD для панорамирования, вверх / вниз для увеличения, вправо / влево для поворота и Q / E для изменения перспективы. Не стесняйтесь просматривать код, но имейте в виду, что он не очень хорошо организован или прокомментирован, и большая часть его отбрасывается из-за ненужного кода.
Так или иначе, мой ответ ... Да, это возможно, легко в Safari, или с большими усилиями и плохой производительностью в других браузерах (и, вероятно, есть способ в IE, но я понятия не имею, как) .