3d-трансформация растровой графики

Трансформация растровой графики

Преобразование прямоугольного изображения так, чтобы оно как будто было повернуто вглубь экрана, требует, как минимум, создания скосов противоположных границ с соответствующим изменением масштаба. В результате исходная прямоугольная картинка становится трапецевидной. Речь идет о создании эффекта перспективы.

Замечу, что трансформации содержимого элемента <canvas> с помощью скриптов на JavaScript, трансформации CSS 3 (свойство transform), а также трансформации, поддерживаемые в SVG, не позволяют пока выполнить трапецеидальное преобразование с соответствующим изменением масштаба содержимого, которое и создает эффект перспективы. Речь идет о преобразовании, которое является по сути своей 3d-, а не 2d-трансформацией. Не исключено, что в будущем элемент <canvas>, CSS и SVG разовьются так, что позволят создавать трехмерные эффекты. А пока я предлагаю вариант, реализованный посредством JavaScript и базовых элементов HTML.

Здесь показан пример реализации трапецеидального преобразования с помощью Javascript. Я написал скрипт на скорою руку, поэтому его можно улучшить. Вы можете посмотреть, как он работает при различных значениях параметров, введя их в форму и щелкнув на кнопке Показать.

Угол схождения, град.:
Шаг, px:
Масштаб:
На своей странице вы размещаете элемент <div id="xid "></div>. В нем будет находиться картинка. Данный элемент изначально может быть пустым. Картинка загружается в браузер и отображается в данном <div> с помощью скрипта. В CSS можно задать для него параметры, например:
#xid {position:absolute; z-index:100; top:100px; left:200px}
Чтобы вывести трансформированную картинку, следует вызвать функцию: 
d3(xid, URL-картинки, угол_схождения, шаг, масштаб)
Здесь xid - значение атрибута id тега <div>, в котором будет отображаться картинка. С помощью параметра угол схождения можно не только управлять глубиной перспективы, но и ее направлением. При положительных значениях угла схождение будет вправо, а иначе - влево. Шаг задает степень гладкости преобразования. Масштаб - коэффициент (если меньше 1, то уменьшение, иначе - увеличение).

На данной странице сужение картинки,создающее эффект перспективы, производится влево или вправо. Код функции d3(), выполняющей указанное преобразование, приведен ниже.