Question

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

Answer 1

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

这在IE中不起作用。 Raphael库可以与IE和 it does rotation 一起使用。我相信它使用canvas es

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

你甚至可以用jQuery的 .animate()

进行旋转。

确保考虑元素的宽度。如果旋转宽度大于可见内容的广告，您将获得 funny results 。但是，您可以缩小元素的宽度，并 then rotate them 。

这是一个简单的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 example

注意：
取度并增加它，将顺时针旋转图像。减小旋转度将旋转图像counter clockwise。

Answer 2

是的，我认为你不会有太多运气。通常在主要浏览器使用的3种绘图方法（Canvas，SVG，VML）中，文本支持很差，我相信。如果你想旋转一个图像，那就好了，但是如果你有格式和样式的混合内容，可能不是。

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

Answer 3

跨浏览器旋转任何元素。适用于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+')');

编辑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/

Answer 4

这里有两个jQuery补丁可以提供帮助（当你阅读它时可能已经包含在jQuery中）：

Answer 5

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

Answer 6

编辑：更新了jQuery 1.8

jQuery 1.8将添加特定于浏览器的转换。 jsFiddle Demo

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 Demo

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而不是添加类。就像this一样！我在答案的底部包含了两个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)'});
});

Answer 7

我整理了一个动画旋转代码程序.. 你可以在这里得到你的代码...... （如果不迟到）

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

在jQuery中旋转Div元素

7 个答案:

的 jsFiddle example