当前位置：文江博客话题详情

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

发布于 2024-12-06 14:34:39 字数 92 浏览 0 评论 0原文

谁能给我一个 jQuery 示例来说明如何：

将图像旋转固定的度数（例如 30 度）
对旋转的图像应用投影效果

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无需解释 2024-12-13 14:34:39

-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;

会做的

-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;

will do it

回复收藏 0 原文

温馨耳语 2024-12-13 14:34:39

@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' 代码的此修改来应用投影：

-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 中导致丑陋的黑色背景。没有它似乎工作得很好。

@genesis' answer doesn't seem to support Internet Explorer, as the DXImageTransform.Microsoft.BasicImage(rotation=) parameter only supports 90, 180, and 270 degree increments (docs here: http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx.

A better solution I've found is to use a combination of @genesis' answer, and a jQuery plugin found here:
http://code.google.com/p/jqueryrotate/

Use the jQuery code to rotate the image by whatever amount:

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

And then use this modification of @genesis' code to apply the 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;

The modification doesn't include this line: