简体繁体 English

使用jQuery动画化图像的视角？

[英]Animating an image's perspective using jQuery?

原文 2012-04-03 10:42:14 9 2 javascript/ jquery

I was wondering if there was any jQuery library that will allow us to change the perspective of an image. 我想知道是否有任何jQuery库将允许我们更改图像的角度。

I know that modern browsers already support vendor specific rotate() in CSS but it doesn't quite give the desired result. 我知道现代浏览器已经在CSS中支持供应商特定的rotate() ，但是并不能完全达到预期的效果。 Most of them just vary the width of the image but doesn't shrink the height of one side and increase the height of one side to produce the effect that you are viewing the image from another angle. 它们中的大多数只是改变图像的宽度，而不会缩小一侧的高度，而不会增加一侧的高度，以产生从另一角度查看图像的效果。

Any more details that you may need, please tell me. 您可能需要更多详细信息，请告诉我。 Thanks! 谢谢！

EDIT 编辑

I already tried transforms but they don't increase the height of the side that is moving towards you and decrease the one that is moving away from you. 我已经尝试过变换，但是它们并不会增加朝向您的一侧的高度，也不会减少远离您的一侧的高度。 And I don't do full rotations, i just tilt the image a few degrees so the change in height has to really be there 而且我不做完整的旋转，我只是将图像倾斜了几度，所以高度变化必须确实存在

2 个解决方案

Have a look at script3D.js 看看script3D.js

http://minimal.be/lab/Sprite3D/ http://minimal.be/lab/Sprite3D/

could be usefull for 3D css animations. 对于3D CSS动画可能很有用。

CSS3 has 2D-transforms and 3D-transforms. CSS3具有2D转换和3D转换。 While the first is well supported (by all browsers, not by all used versions [ 1 ]) the second is currently only supported by mozilla and webkit [ 2 ]. 虽然第一个得到了很好的支持（所有浏览器，而不是所有使用的版本[ 1 ]），但是第二个当前仅受mozilla和webkit [ 2 ]支持。 Both features mostly need vendor-prefixes. 这两个功能大多都需要供应商前缀。