变换后的宽度/高度 [英] width/height after transform
本文介绍了变换后的宽度/高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在应用 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);
这篇关于变换后的宽度/高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
