想要在jquery中旋转元素答案

【问题标题】：Want to rotate element in jquery想要在jquery中旋转元素
【发布时间】：2012-06-06 05:47:21
【问题描述】：

我正在尝试使用放置在元素 上的 handle (handle=>div) 旋转元素（任何元素 div，p..） >top-left 角，现在我的问题是元素没有完全旋转到 360 度，谁能帮忙：

$("#elementid").live('mouseover', function () {
    $(this).draggable({ handle: "#handleid", drag: function (event, ui) {
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
        alert(ui.position.left);
        $(this).parent().parent().css({
            '-moz-transform': rotateCSS,
            '-webkit-transform': rotateCSS
        });
    }
    });
});

【问题讨论】：

360度？？？我想它会得到它原来的位置......
很棒的评论@PriyankPatel 是对的，但我认为他的意思是让 360 度动画正确
我的意思是说0度到360度，只有聪明的人才能理解:)
@KingKong 你的意思是从右向左旋转或顺时针旋转之类的

标签： javascript jquery

【解决方案1】：

这些是stackoverflow中同一类别的问题

如何旋转div

trying to rotate a div element with jQuery controlling css3 transform command

Rotating a Div Element in jQuery

How to rotate a div using jQuery

看看第二个链接它的辉煌

live rotate and other css demo brillian http://css3please.com/

仔细看看这个

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
      -ms-transform: rotate(7.5deg);  /* IE9 */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
          transform: rotate(7.5deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
}

更新：

注意note this on http://css3please.com/页面中间的这个不错的添加

【讨论】：

感谢@shareef 的回答，但我想知道，我的代码中是否有任何范围，我可以通过它实现我想要的？
是的，如果我理解正确，您应该将 .box_rotate 类添加到要旋转的元素中，就像在此链接示例中一样，使用 addClass 和 removeClass 到 div、p 或您希望的任何元素：将指定的类添加到每个匹配元素的集合中。 .addClass( className ) className一个或多个类名称要添加到每个匹配元素的类属性中。 JQuery API .addClass JQuery API .removeClass()

【解决方案2】：

您可以使用 Jquery rotate 进行旋转。检查下例：

$(img).css('-moz-transform', 'rotate(' + degree + 'deg)');

$(img).css('-webkit-transform', 'rotate(' + degree + 'deg)');

$(img).css('-o-transform', 'rotate(' + degree + 'deg)');

$(img).css('-ms-transform', 'rotate(' + degree + 'deg)');

$(img).css('transform', 'rotate(' + degree + 'deg)');

您也可以参考CSS Matrix Rotation

【讨论】：