ancho/alto después de la transformación

¿Cómo recupero las propiedades de ancho y alto después de aplicar transform: rotate(45deg);?ancho/alto después de la transformación

Me gusta, 11x11 cuadrado después de la rotación se convierte en 17x17 (resultado de Chrome), pero javascript aún devuelve el ancho/alto original - 10x10.

¿Cómo obtengo este 17x17?

Fuente

2011-09-27 jolt

me pregunto por qué usted está recibiendo 17x17, se supone que está girada 45 grados a partir de 11x11, a continuación, nuevas dimensiones deben ser de 15x15, 16x16 o – jondinham

Creo Chrome ceils automáticamente el resultado coseno. – jolt

Incluso si gira algo, las dimensiones no cambian, por lo que necesita una envoltura. Trate de envolver su div con otro elemento div y cuenta las dimensiones envolturas:

<style type="text/css"> 
    #wrap { 
    border:1px solid green; 
    float:left; 
    } 

    #box { 
    -moz-transform:rotate(120deg); 
    border:1px solid red; 
    width:11px; 
    height:11px; 
    } 
    </style> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    alert($('#box').width()); 
    alert($('#wrap').width()); 
    }); 
    </script> 
</head> 

<body> 
<div id="wrap"> 
    <div id="box"></div> 
    </div> 
</body>

Redited: solución de la envoltura no está funcionando adecuadamente, ya que el envoltorio no se ajusta automáticamente a los contenidos de la div interior. Siga la solución matemática:

var rotationAngle; 

var x = $('#box').width()*Math.cos(rotationAngle) + $('#box').height()*Math.sin(rotationAngle);

Fuente

2011-09-27 07:37:46 nonouco

Quizás en Firefox no cambie, pero Chrome en la vista de inspector muestra los valores calculados. Wrapper es una gran solución, pero es costosa. – jolt

@Tom firefox se comporta como lo describió. antes que nada debemos tener en claro que una caja girada tiene las mismas dimensiones. es como si, al rotar un trozo de papel en su escritorio, sus dimensiones siguen siendo las mismas. Es por eso que necesitas la envoltura. si no puedes soportarlo necesitas matemáticas para calcular las dimensiones que necesitas. las mismas matemáticas, usa Firefox internamente para calcular las dimensiones de la envoltura. por favor considera mi +1 aquí. – nonouco

Sí, mientras publicaste esto, ya hice una función para calcular nuevas dimensiones. -1 para CSS3/DOM3/HTML5 por no realizar funciones nativas para recuperar estos valores esenciales. – jolt

En caso de que usted está buscando una función para calcular estos valores mediante programación ...

// 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)) }; 
}

Aquí hay un poco de algo que puse. Probablemente no sea la mejor opción, pero hace el trabajo por mí.

Fuente

2011-09-27 08:27:34 jolt

En lugar de calcularlo usted mismo, puede obtenerlo a través del HTMLDOMElement 's getBoundingClientRect().

Esto devolverá un objeto con los height y width correctos, teniendo en cuenta la matriz de transformación.

jsFiddle.

Fuente

2013-08-21 12:05:57 alex

ps no funciona con $, solo con: querySelector – user956584

@Userpassword Sí, así es como funciona jQuery. Necesitarías usar '[0]' o 'get (0)' o similar. – alex

Solo conseguí que esto funcione correctamente. Sí, sé que la pregunta es antigua, pero si la pregunta se hizo hoy, creo que esta debería ser la respuesta aceptada. – bestprogrammerintheworld

Hice una función para esto, domvertices.js

Se calcula las coordenadas 3D 4 vértices de cualquier , en el fondo, transform ed, ed position elemento DOM - en realidad sólo cualquier elemento: ver el DEMO.

a    b 
+--------------+ 
|    | 
|  el  | 
|    | 
+--------------+ 
d    c 

var v = domvertices(el); 
console.log(v); 
{ 
    a: {x: , y: , z: }, 
    b: {x: , y: , z: }, 
    c: {x: , y: , z: }, 
    d: {x: , y: , z: } 
}

Con esos vértices, se puede calcular nada entre: anchura, altura ... Por ejemplo, en su caso:

// norm(a,b) 
var width = Math.sqrt(Math.pow(v.b.x - v.a.x, 2) + Math.pow(v.b.y - v.a.y, 2));

Véase el README para más informaciones.

Se publica como un módulo CommonJS, por lo que sólo instalarlo con:

npm install domvertices

Saludos.

Fuente

2015-05-10 22:44:26 abernier

Su señor, merece una medalla. http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e – Orwellophile

¡Genial! Un muy buen complemento sería 'width' y' height' (o 'w, h') para aquellos de nosotros que recordamos que las matemáticas no son tan buenas;) Incluso como' function's sería genial si quieres evitar los calcs si ellos no son usados – Campbeln

@abernier [tal vez usted es el único que puede responder mi pregunta (bounty +100) ??? Cualquier ayuda es muy apreciada ...] (https://stackoverflow.com/questions/45578101/formular-to-calculate-width-height-relative-to-parent-of-container-with-transl) – Axel

-1

Estoy escribiendo esta respuesta porque ha etiquetado JQuery.

Jquery tiene en cuenta los factores de transformación al calcular las dimensiones.

Por lo tanto, si se utiliza

$('mySelector').width()

que le dará el ancho real. Lo mismo ocurre con height(), left(), y top()

Fuente

2016-07-20 07:05:14

ancho/alto después de la transformación

Respuesta

Cuestiones relacionadas