本文介绍了变换后的宽度/高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在应用 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);更多推荐
变换后的宽度/高度
发布评论