旋转图像答案

【问题标题】：Rotating images旋转图像
【发布时间】：2011-02-08 05:54:16
【问题描述】：

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

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

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

谁能帮我写代码。

非常感谢

【问题讨论】：

它是用 jQuery 标记的
@Bil fading effect to rotate 是什么意思？你的style 标签缺少type 属性:)
以上是网站上已有的基本 HTML，但基本上我需要在这个块内旋转一系列图像。所以，我发现了以下内容：alohatechsupport.net/webdesignmaui/maui-web-site-design/… 但是，我无法对 CSS 等进行编码以确保它在网站上已经存在的 HTML 和 CSS 中工作，并且需要一些帮助来修改此脚本以在网站上工作。
我一直在尝试这样做几个小时，但每次都失败了；因此需要帮助。
@Bill 你的意思是：jquery.malsup.com/cycle/begin.html?因为这基本上就是您链接到的那个网站中的代码所做的

标签： javascript jquery html image slider

【解决方案1】：

试试 jQuery Rotate 扩展。这听起来可能就是您正在寻找的。p>

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

【讨论】：

嗨，我修改了很多；但是，我需要一些帮助来编码，以便在显示的 CSS 和 HTML 中已经定义的参数内工作

【解决方案2】：

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

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

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

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

【讨论】：

您好，当然...但如前所述，我需要有人协助处理此代码和 CSS，以确保它可以应用于已经到位的 CSS 和当前定位。
嗯，等等...我不确定我是否理解了这个问题好的...您需要图像旋转器（即转换器），还是要将图像旋转一个角度？

【解决方案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）在运行时修改样式并获得动画效果（相对）很容易。

享受吧。

【讨论】：

永远不要按这个顺序使用属性！！！没有供应商前缀的那个总是最后，否则你可能会产生难以调试的错误行为。这是一篇关于它的文章：css-tricks.com/ordering-css3-properties

【解决方案4】：

这更像是一个组合问题。如果您制作自己的资源（ajax 侦听器）来利用 php 的function.imagerotate，您将很快解决您自己的问题。

【讨论】：