Cómo obtener la altura real (no original) de un elemento con giro CSS

Necesito obtener la altura real de varios elementos diferentes (por el preciso posicionamiento preciso de la información sobre herramientas), y algunos de estos elementos (no todos) se giran . $ (elem) .outerHeight() devuelve la altura original, en lugar de la altura real mostrada.Cómo obtener la altura real (no original) de un elemento con giro CSS

Aquí está el violín con un ejemplo muy sencillo: http://jsfiddle.net/NPC42/nhJHE/

Veo una posible solución en esta respuesta: https://stackoverflow.com/a/8446228/253974, pero todavía estoy esperando que hay una manera más sencilla.

Fuente

2012-03-20 NPC

Al quitarme la geometría de mi escuela secundaria y mis formidables habilidades gráficas, coloco este diagrama. Si tiene variables de width, height, y rotation en javascript, podría expresar la altura de esta manera:

var rotated_height = width * Math.sin(rotation) + height * Math.cos(rotation);

enter image description here

Fuente

2012-03-20 18:59:02 recursive

Gracias por editar Starx. ¡Ese fue un error bastante crucial en la parte más importante de la publicación! – recursive

Gracias, lo entiendo, pero te perdiste que estoy procesando varios elementos, solo que algunos están rotados. Estoy buscando un método universal "obtener la altura de un elemento", sin pre-saber que ha sido rotado. Pero si no puedo encontrarlo, tendré que usar este método, sí :) ¡Gracias de nuevo! – NPC

@NPC: si la rotación es 0, este método todavía funciona sin casos especiales, ya que 'sin (0) == 0' y' cos (0) == 1'. – recursive

Si sólo va a estar usando rotaciones de 45 grados y la anchura y la altura son siempre iguales, se puede calcular la altura real girada mediante el uso de la matemática relativamente simple Hypotenuse fórmula:

que establece que el cuadrado de la longitud de la hipotenusa es igual a la suma de los cuadrados de las longitudes de los otros dos lados.

En este caso, el lado más largo sería la diagonal de esquina a esquina opuesta. Esto más o menos traducirse en jQuery, así:

Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2))

Véase el jsFiddle actualizada.

Fuente

2012-03-20 17:21:30

Igual que el anterior - Gracias, pero se ausentó que yo estoy procesando varios elementos, solamente algunos de los cuales están girados. Pero, gracias por responder. – NPC

Cómo obtener la altura real (no original) de un elemento con giro CSS

Respuesta

Cuestiones relacionadas