在jQuery中旋转Div元素|jquery问答

尝试旋转div元素...这可能是DOM亵渎，它是否可以与canvas元素一起使用？我不确定-如果有人对它如何工作或为什么不起作用有任何想法，我很想知道。谢谢。

要旋转DIV，请使用WebkitTransform / -moz-transform: rotate(Xdeg)。

这在IE中不起作用。Raphael库可以与IE一起使用，并且可以旋转。我相信它使用canvases

如果要为旋转设置动画，则可以使用递归 setTimeout()

您甚至可以使用jQuery进行部分旋转 .animate()

确保您考虑了元素的宽度。如果旋转的宽度大于其可见内容的宽度，则会得到有趣的结果。但是，您可以缩小元素的宽度，然后旋转它们。

这是一个简单的jQuery代码片段，可旋转jQuery对象中的元素。旋转可以启动和停止：

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle示例

注意：

获取并增加度数，将顺时针旋转图像。降低旋转度将使图像逆时针旋转。

是的，我想你不会有太多的运气。我认为，通常在主要浏览器使用的3种绘制方法（画布，SVG，VML）中，文本支持都很差。如果要旋转图像，那一切都很好，但是如果您将内容与格式和样式混合在一起，则可能不会。

请查看RaphaelJS以获取跨浏览器绘图API。

跨浏览器旋转的任何元素。可在IE7和IE8中使用。在IE7中，似乎无法在JSFiddle中工作，但在我的项目中，也可在IE7中工作

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

Edit 13/09/13 15:00包装在一个漂亮，简单，可链接的jquery插件中。

使用例

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle：http : //jsfiddle.net/RgX86/175/

这是两个有助于解决问题的jQuery补丁（在您阅读本文时，它们可能已经包含在jQuery中）：

我怀疑您可以使用DOM / CSS旋转元素。最好的选择是渲染到画布上并将其旋转（不确定具体细节）。

编辑：为jQuery 1.8更新

jQuery 1.8将添加浏览器特定的转换。jsFiddle演示

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

编辑：添加了使其成为jQuery函数的代码。

对于那些不想进一步阅读的人，请继续。有关更多详细信息和示例，请继续阅读。jsFiddle演示。

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$('.rotate').click(function() {
    rotation += 5;
    $(this).rotate(rotation);
});

编辑：这篇文章的评论之一提到jQuery Multirotation。jQuery的这个插件本质上执行了上述功能，并支持IE8。如果您想要最大的兼容性或更多选择，可能值得使用。但是为了最小的开销，我建议使用上述功能。它可以在IE9 +，Chrome，Firefox，Opera等众多平台上运行。

Bobby ...这是供那些实际上想要在javascript中做到的人使用的。这可能是在javascript回调上旋转所需的。

这是一个jsFiddle。

如果您想按自定义间隔旋转，则可以使用jQuery手动设置css而不是添加类。像这样！我在答案的底部都包含了两个jQuery选项。

的HTML

<div class="rotate">
    <h1>Rotatey text</h1>
</div>

的CSS

/* Totally for style */
.rotate {
    background: #F02311;
    color: #FFF;
    width: 200px;
    height: 200px;
    text-align: center;
    font: normal 1em Arial;
    position: relative;
    top: 50px;
    left: 50px;
}

/* The real code */
.rotated {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

jQuery的

确保将它们包装在$ {document）.ready中

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

自定义间隔

var rotation = 0;
$('.rotate').click(function() {
    rotation += 5;
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
});

我整理了一个动画旋转代码程序..您可以在这里获取代码...（如果不晚的话）

http://99mission.why3s.tw/rotatetest.html

本文地址：http://jquery.askforanswer.com/zaijqueryzhongxuanzhuandivyuansu.html
文章标签：ajax , canvas , dom , jquery , jquery-animate
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

jsFiddle示例

文件下载