应用后如何检索宽度和高度属性transform: rotate(45deg);？
就像，旋转后的 11x11 正方形变为 17x17（Chrome 结果），但 javascript 仍然返回原始宽度/高度 - 10x10。
我如何获得这个 17x17？
变换后的宽度/高度
IT技术
javascript
jquery
html
css
2021-02-01 18:28:28
4个回答
即使你旋转了一些东西，它的尺寸也不会改变，所以你需要一个包装器。尝试用另一个 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);
我为此做了一个函数， domvertices.js
它计算任何、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));
有关更多信息，请参阅自述文件。
——
它作为 npm module发布（没有 dep），所以只需安装它：
npm install domvertices
干杯。
如果您正在寻找一个函数来以编程方式计算这些值...
// 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)) };
}
这是我提出的一些东西。可能不是有史以来最好的事情，但对我有用。