在jQuery中旋转Div元素

Question

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

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

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

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