変換後の幅と高さの取得

rotate(45deg) などの変換を要素に適用すると、その要素の視覚的な寸法が取得されます。変化。ただし、JavaScript の幅と高さのプロパティは、変換されていない元の寸法を反映したままです。

解決策: getBoundingClientRect() を使用する

変換後に更新された寸法を取得するには、 HTMLDOMElement の getBoundingClientRect() メソッド。このメソッドは、変換された高さと幅を含むオブジェクトを返します。

例:

// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;

Demo:

実際的な例については、この jsFiddle を参照してください: https://jsfiddle.net/your_url_here

注: このメソッドは、境界線やパディングを含む要素全体の寸法を示します。コンテンツの寸法のみを計算する必要がある場合は、要素のコンテンツ要素 (たとえば、変換された要素内の