想要在jquery中旋转元素

Question

我正在尝试使用句柄（handle =＆gt; div）来旋转元素（任何元素div，p ..），我放置在元素的< em>左上角角落，现在我的问题是该元素没有完全旋转到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
        });
    }
    });
});

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

页面中间的这个不错的添加内容

Answer 2

您可以使用Jquery旋转旋转。请查看以下示例：

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