转换后的宽度/高度

一尘不染

转换后的宽度/高度

html

应用后如何检索width和height属性transform: rotate(45deg);？

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

我如何获得17x17？

阅读 270

2020-05-10

共1个答案

一尘不染

即使旋转某些东西，它的尺寸也不会改变，因此您需要一个包装纸。尝试用另一个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>

重做： 包装器解决方案无法正常工作，因为包装器未自动调整为内部div的内容。遵循数学解：

var rotationAngle;

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

2020-05-10