Estoy teniendo un problema con la obtención de la posición de un div, después de rotate filtro se aplica a ella. Tengo la posición de uno de los extremos, su altura y el ángulo por el cual se gira, pero después de comprobar lo que este filtro hace realmente en el MDN («[cos(ángulo) sin(ángulo) -sin(ángulo) cos(ángulo) 0 0]») aún no sé cómo crack.

Ejemplo :

Cómo obtener la posición de un elemento transformado con css girar

El div que me interesa es la línea discontinua. Su estilo en ese momento fue :

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

(top/left describir la posición de su comienzo.) Estoy tratando de conseguir el top/left posición de su extremo.

  • después de actualizar mis conocimientos de matemática que he venido para arriba con algo como esto : var x = termin.top + Matemáticas.cos(ángulo) * div.altura; var y = div.izquierda + Math.sin(angle) * div.altura; ¿alguien Puede confirmar si esa es la solución adecuada ?
InformationsquelleAutor owca | 2012-06-27

2 Comentarios

  1. 16

    Por su Pregunta actual y su solicitó la confirmación de:

    var x = termin.top + Math.cos(angle) * div.height;
    var y = div.left + Math.sin(angle) * div.height;

    La solución se puede encontrar en este otro MODO de Respuesta para un cuestión diferente, mejorada aquí:

    //return an object with full width/height (including borders), top/bottom coordinates
    var getPositionData = function(el) {
        return $.extend({
            width: el.outerWidth(false),
            height: el.outerHeight(false)
        }, el.offset());
    };
    
    //get rotated dimensions   
    var transformedDimensions = function(el, angle) {
        var dimensions = getPositionData(el);
        return {
            width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
            height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
        };
    };


    He aquí un interactivo jsFiddle que proporciona actualizaciones en tiempo real para getPositionData(); función.
    Usted será capaz de ver el top y left valores al final de la CSS3 Rotación proceso de control.

    Referencia:   jsFiddle

    Actualización de estado: La anterior jsFiddle funciona muy bien para 0-90deg y puede ser aprobado por todos los ángulos y en diferentes unidades, tales como rad, grad, y gire a la.

  2. 5

    Trate de usar element.getBoundingClientRect()

    Según MDN:

    De partida en Gecko 12.0 (Firefox 12.0 /Thunderbird 12.0) , el efecto de la CSS se transforma
    en cuenta cuando se calcula el elemento del rectángulo delimitador.

    • No sabemos qué otros navegadores toman en consideración transforma con getBoundingClientRect? Lo que es más importante: punto en el que IE hace? Funciona con IE9?
    • href=»https://jsfiddle.net/hhwrv5ov/» >desde mi prueba se parece IE9 también toma se transforma en cuenta (pero se redondea los resultados a toda píxeles). IE10 funciona como cualquier otro de los navegadores (no los resultados de las rondas).

Dejar respuesta

Please enter your comment!
Please enter your name here