Question

只是想知道是否有人可以帮我编码以下内容。

我想使用淡化效果旋转一系列图像（总共7个），在CSS和下面已定义的代码中：

<style="text/css">
.rotate {float: left;width: 160px;height: 215px;background-color: #FFFFFF;border: 2px solid #0066CC;margin: 0px 10px 10px 0px;text-align: center;overflow: hidden;}
</style>


<div class="rotate">
    <span>
        <a href="#">
            <img border="0" src="catimage.jpg" width="160" height="160" alt="" class="" />
        </a>
    </span>
    <div onclick="javascript:document.location.href='/';">
        <a href="/"></a>
    </div>
</div>

有人可以帮我编码吗。

非常感谢

Answer 1

尝试jQuery Rotate扩展。这听起来像是你正在寻找的东西。

http://code.google.com/p/jquery-rotate/

Answer 2

我发现这个jQuery插件显然能够以给定的角度旋转图像并且适用于所有浏览器。我没试过，但这是一个起点。

http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

如果您不介意您的代码仅在webkit浏览器中工作，则可以使用CSS转换仅在CSS中完成旋转。这是一个包含代码的演示：

http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

Answer 3

您可以使用CSS进行旋转。好消息是它几乎适用于所有网络浏览器。坏消息是，这是一个逐个浏览器的东西，所以它需要相当多的代码！例如，要将元素旋转45度，您可以执行以下操作：

-ms-transform: rotate(45deg); /* IE9 */
-moz-transform: rotate(45deg);  /* FF3.5+ */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
transform: rotate(45deg);  /* plain CSS3 (for when it gets supported) */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

您会注意到MS版本使用奇怪的数字而不是度数。这些是（我相信）弧度。您需要在它们之间进行转换，以获得您想要使用的任何值。

无论如何，一旦你得到了这个，它（相对）很容易使用Javascript（或JQuery）在运行时修改样式，并使旋转动画。

享受。

Answer 4

这更像是一个组合问题。如果你创建自己的资源（ajax监听器）来使用php的function.imagerotate，你将很快解决自己的问题。

旋转图像

4 个答案: