4

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

2 回答 2

3

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

如何旋转div

尝试使用 jQuery 控制 css3 转换命令旋转 div 元素

在 jQuery 中旋转 div 元素

如何使用 jQuery 旋转 div

看看第二个链接它的辉煌

现场旋转和其他 css 演示精彩 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;
}

更新：

在 http://css3please.com/上的注释页面中间注意这个很好的补充

你可以操纵你想实时生成代码的任何东西

于 2012-06-06T05:55:21.383 回答
1

您可以使用 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

于 2012-06-06T06:22:17.243 回答