变换后的宽度/高度答案

【问题标题】：width/height after transform变换后的宽度/高度
【发布时间】：2011-09-27 07:22:20
【问题描述】：

应用transform: rotate(45deg);后如何检索宽度和高度属性？

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

我如何获得这个 17x17？

【问题讨论】：

我想知道为什么你得到 17x17，假设它从 11x11 旋转了 45 度，那么新尺寸应该是 15x15 或 16x16
我认为 Chrome 会自动设置余弦结果的上限。

标签： javascript jquery html css

【解决方案1】：

您可以通过HTMLDOMElement 的getBoundingClientRect() 获得此值，而不是自己计算。

这将返回一个具有正确height 和width 的对象，同时考虑到变换矩阵。

jsFiddle.

【讨论】：

@Userpassword 是的，这就是 jQuery 的工作方式。您需要使用 [0] 或 get(0) 或类似名称。
我只是让它正常工作。是的，我知道这个问题很老，但如果今天提出这个问题，我相信这应该是公认的答案。
这要简单得多。谢谢。
同意其他所有人。与其他过度设计/复杂的解决方案相比，这应该是可接受的答案。
我知道这种类型的评论是不允许的，但我喜欢@alex 如何将 OP 的图片放到 jsfiddle 而不是一些随机图片 xD

【解决方案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>

已编辑：包装器解决方案无法正常工作，因为包装器不会自动调整为内部 div 的内容。遵循数学解决方案：

var rotationAngle;

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

【讨论】：

也许在 Firefox 中它不会改变，但在检查器视图中的 Chrome 会显示计算值。 Wrapper 是一个很好的解决方案，但它很昂贵。
@Tom firefox 的行为就像你描述的那样。首先，我们需要清楚旋转的盒子仍然具有相同的尺寸。就像，如果你在桌子上旋转一张纸，它的尺寸保持不变。这就是为什么你需要包装器。如果您负担不起，则需要数学来计算所需的尺寸。相同的数学，firefox 在内部使用来计算 wrap 的尺寸。请在此处考虑我的 +1。
是的，当您发布此内容时，我已经创建了一个计算新尺寸的函数。 -1 表示 CSS3/DOM3/HTML5 不使用原生函数来检索这些基本值。
在解决这个问题的同时，我终于发现 javascript 中的 cos/sin 采用径向线！不是学位！我希望我用这条评论为别人节省了一点时间；）
宽度的数学解决方案效果很好，我该如何计算高度？

【解决方案3】：

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

它计算 any、deep、transformed、positioned DOM 元素的 4 个顶点 3d 坐标——实际上就是任何元素：参见 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: }
}

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

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

请参阅README 了解更多信息。

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

npm install domvertices

干杯。

【讨论】：

酷！一个非常好的补充是width 和height（或w,h）对于我们这些记数学不太好的人来说；）即使functions 如果你想避免计算也会很棒没用过。
@abernier maybe you are the one who can answer my question (bounty +100)??? Any help is very apreciated...

【解决方案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)) };
}

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

【讨论】：