Question

如何在我申请transform: rotate(45deg);后检索宽度和高度属性？

喜欢，旋转后的11x11平方变为17x17（Chrome结果），但javascript仍然会返回原始宽度/高度 - 10x10。

如何获得17x17？

Answer 1

您可以通过HTMLDOMElement的{{3}}来获取此信息，而不是自己计算。

这将返回一个具有正确height和width的对象，并考虑转换矩阵。

getBoundingClientRect()

Answer 2

即使你旋转某些东西，它的尺寸也不会改变，所以你需要一个包装器。尝试使用另一个div元素包装div并计算包装器维度：

  <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：包装器解决方案无法正常工作，因为包装器不会自动调整为内部div的内容。遵循数学解决方案：

var rotationAngle;

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

Answer 3

我为此创建了一个函数，domvertices.js

它计算任意，深，transform ed，position ed DOM元素的4个顶点3d坐标 - 实际上只是任何元素：请参阅{{3} }。

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: }
}

使用这些顶点，您可以计算以下任何内容：宽度，高度......例如，在您的情况下：

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

有关更多信息，请参阅DEMO。

-

它作为npm模块发布（没有dep），所以只需安装它：

npm install domvertices

干杯。

Answer 4

如果您正在寻找以编程方式计算这些值的函数......

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

这是我提出的一些东西。可能不是有史以来最好的事情，但对我来说是有用的。

Answer 5

我写这个答案是因为你已经标记了JQuery。

Jquery在计算维度时会考虑转换因子。

所以，如果你使用

$('mySelector').width()

它会给你实际的宽度。与height()，left()和top()

相同

变换后的宽度/高度

5 个答案: