insertar - Girar un elemento Div en jQuery

jquery innerhtml

Question

Intentando rotar un elemento div ... Esto podría ser una blasfemia DOM, ¿podría funcionar posiblemente con un elemento canvas? No estoy seguro, si alguien tiene alguna idea de cómo podría funcionar esto o por qué no funciona, me gustaría saberlo. Gracias.

Answer 1

Para rotar un DIV Haga uso de WebkitTransform / -moz-transform: rotate(Xdeg) .

Esto no funcionará en IE. La biblioteca de Raphael funciona con IE y hace rotación . Creo que usa canvas

Si desea animar la rotación, puede usar un setTimeout() recursivo setTimeout()

Es probable que incluso .animate() hacer parte de un giro con el .animate() de jQuery .animate()

Asegúrate de considerar el ancho de tu elemento. Si gira una que tenga un ancho mayor que su contenido visible, obtendrá resultados divertidos . Sin embargo, puede reducir el ancho de los elementos y luego rotarlos .

Aquí hay un fragmento de jQuery simple que rota los elementos en un objeto jQuery. La rotación se puede iniciar y detener:

$(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);
    }
});

Ejemplo jsFiddle

Nota:
Tomando el grado y aumentando, girará la imagen en el sentido de las agujas del reloj. Al disminuir el grado de rotación, la imagen girará en sentido contrario a las agujas del reloj .

Answer 2

Dudo que puedas rotar un elemento usando DOM / CSS. Su mejor opción sería renderizar en un lienzo y rotarlo (no estoy seguro de los detalles).

Answer 3

Sí, no vas a tener mucha suerte, creo. Normalmente, a través de los 3 métodos de dibujo que usan los principales navegadores (Canvas, SVG, VML), el soporte de texto es pobre, creo. Si desea rotar una imagen, entonces todo está bien, pero si tiene contenido mixto con formatos y estilos, probablemente no.

Echa un vistazo a RaphaelJS para una API de dibujo entre navegadores.

Answer 4

Aquí hay dos parches de jQuery para ayudar (tal vez ya estén incluidos en jQuery para cuando estés leyendo esto):

• Aplicación de parches a jQuery css () Método para admitir ''transformación''
• jQuery Patch: animar la rotación de CSS y la escala

Answer 5

Cross-browser rotar para cualquier elemento. Funciona en IE7 e IE8. En IE7 parece que no funciona en JSFiddle, pero en mi proyecto también funcionó en 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+'')'');

Editar 13/09/13 15:00 Envuelto en un plugin de jquery agradable y fácil, encadenable.

Ejemplo de uso

$.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 6

EDITAR: actualizado para jQuery 1.8

jQuery 1.8 agregará transformaciones específicas del navegador. 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);
});

EDITAR: Se agregó un código para que sea una función jQuery.

Para aquellos de ustedes que no quieren leer más, aquí tienen. Para más detalles y ejemplos, sigue leyendo. 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);
});

EDITAR: Uno de los comentarios en esta publicación mencionó jQuery Multirotation . Este complemento para jQuery esencialmente realiza la función anterior con soporte para IE8. Puede valer la pena usarlo si quiere la máxima compatibilidad o más opciones. Pero para una sobrecarga mínima, sugiero la función anterior. Funcionará IE9 +, Chrome, Firefox, Opera y muchos otros.

Bobby ... Esto es para las personas que realmente quieren hacerlo en el javascript. Esto puede ser necesario para rotar en una devolución de llamada javascript.

Aquí hay un jsFiddle .

Si desea rotar a intervalos personalizados, puede usar jQuery para configurar manualmente el CSS en lugar de agregar una clase. Me gusta esto ! He incluido ambas opciones jQuery en la parte inferior de la respuesta.

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

Asegúrese de que estén envueltos en $ (documento) .Ready

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

Intervalos personalizados

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

Arreglé un programa de código de rotación animado ... puedes obtener tu código aquí ... (si no es demasiado tarde)

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