变换后的宽度/高度 | 变换后的宽度

本文介绍了变换后的宽度/高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在应用 transform：rotate（45deg）; ？

例如，旋转后的11x11方块变成17x17（Chrome结果），但是JavaScript仍会返回原始宽度/高度 - 10x10。

Like, 11x11 square after rotation becomes 17x17 (Chrome result), but javascript still returns original width/height - 10x10.

如何获得此17x17？ / p>

How do I get this 17x17?

推荐答案

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

Even if you rotate something the dimensions of it do not change, so you need a wrapper.Try wrapping your div with another div element and count the wrappers dimensions:

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

已修改：封装解决方案无法正常工作，不会自动调整到内部div的内容。遵循数学解：

Redited: the wrapper solution is not working properly, as the wrapper is not automatically adjusted to the contents of the inner div. Follow the mathematical solution:

var rotationAngle;

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

这篇关于变换后的宽度/高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！