anchura / altura después de transformar

Question

anchura / altura después de transformar

¿Cómo puedo recuperar las propiedades width y height después de aplicar transform: rotate(45deg);?

Al igual que, 11x11 cuadrado después de la rotación se convierte en 17x17 (resultado Chrome), pero javascript todavía devuelve anchura/altura original - 10x10.

¿Cómo obtengo este 17x17?

26

css javascript html jquery css3

Author: BoltClock, 2011-09-27

Source

5 answers

En lugar de calcularlo usted mismo, puede obtener esto a través de la HTMLDOMElement's getBoundingClientRect().

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

JsFiddle .

52

Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-21 12:05:57

Hice una función para este, domvertices.js

Calcula las coordenadas 3d de 4 vértices de any, deep, transformed, position ed DOM elementreally realmente cualquier elemento: vea la 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 cualquier cosa entre: ancho, alto... 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));

Ver el README para más información.

--

Se publica como un módulo CommonJS, así que solo instálalo con:

npm install domvertices

Saludos.

8

Author: abernier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-10 23:20:24

En caso de que 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 algo que puse. Probablemente no sea lo mejor, pero hace el trabajo por mí.

3

Author: jolt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-27 08:27:34

Estoy escribiendo esta respuesta ya que ha etiquetado jQuery.

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

Por lo tanto, si utiliza

$('mySelector').width()

Te dará el ancho real. Lo mismo pasa con height(), left() y top()

-1

Author: Charlie H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-20 07:05:14

score 20 · Accepted Answer

Incluso si rotas algo, las dimensiones no cambian, por lo que necesitas una envoltura. Intente envolver su div con otro elemento div y cuente las dimensiones de los envoltorios:

  <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: la solución de envoltura no funciona correctamente, ya que la envoltura no se ajusta automáticamente al contenido del div interno. Siga la solución matemática:

var rotationAngle;

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