jquery - 在 jQuery 中旋转 div 元素

Question

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

Answer 1

旋转 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 示例

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

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+')');

编辑 2013 年 9 月 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 中）：

• 修补 jQuery css() 方法以支持“转换”
• jQuery 补丁：动画 CSS 旋转和缩放

Answer 5

编辑：为 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)'});
});

Answer 6

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

Answer 7

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

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