Как наклонить/повернуть холст с изображением внутри него?

Я полный новичок, когда дело доходит до Javascript, холстов и прочего, но у меня есть это изображение (1920x1080), и я хочу, чтобы когда кто-то наводил курсор на изображение, оно наклонялось.

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

Например, http://www.simpleviewer.net/tiltviewer/app/ просто более тонкий а не во флеше.

Этот пример выполнен с помощью JavaScript, но я не знаю, как это сделать, и я не могу полностью прочитать исходный код, и я не хочу вырывать исходный код http://mrdoob.com/97/depth_of_field

Я понятия не имею, с чего начать или даже как начать, я просто сейчас погружаюсь в более продвинутый раздел Javascript, поэтому любая помощь/совет будут очень признательны.


person Andreas    schedule 27.02.2013    source источник


Ответы (1)


Это демо, которое я только что сделал. Вы можете изменить значение там.

-webkit-transform:  skewX(30deg);

до 40 градусов

попробуйте навести курсор на изображение кота.

http://jsfiddle.net/B8FSb/

В основном вам нужно понимать переход css и преобразование css, чтобы иметь возможность делать демонстрационное приложение, которое вы упомянули.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

person wizztjh    schedule 27.02.2013
comment
Не совсем то, что я ищу, последний пример сделан не с использованием CSS. - person Andreas; 27.02.2013
comment
возможно с 3D-преобразованием css developer.apple.com/safaridemos/showcase/gallery - person wizztjh; 27.02.2013
comment
Я сомневаюсь, что вы получите красивый результат, очень сомневаюсь в этом. При дальнейшем осмотре кажется, что это делается с помощью WebGL. - person Andreas; 27.02.2013