jQuery - 以静态量旋转图像，然后应用投影？

Question

任何人都可以给我一个jQuery示例，说明如何：

1. 以静态度数（例如30度）
旋转图像
2. 对旋转的图像应用阴影效果

Answer 1

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-box-shadow:2px 2px 4px #999999;
-webkit-box-shadow:2px 2px 4px #999999;
box-shadow:2px 2px 4px #999999;

会这样做

Answer 2

@genesis'的答案似乎不支持Internet Explorer，因为DXImageTransform.Microsoft.BasicImage（rotation =）参数仅支持90,180和270度的增量（这里的文档：http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx。

我发现一个更好的解决方案是使用@genesis'答案的组合，以及这里找到的jQuery插件：  http://code.google.com/p/jqueryrotate/

使用jQuery代码以任意数量旋转图像：

$('#photo1').rotate(-8);

然后使用@genesis'代码的这个修改来应用drop-shadow：

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-box-shadow:2px 2px 4px #999999;
-webkit-box-shadow:2px 2px 4px #999999;

修改不包括此行：

box-shadow:2px 2px 4px #999999;

因为包含该行会因某种原因在Internet Explorer中出现丑陋的黑色背景。没有它，似乎工作正常。