CSSでRotateとScale Transformを組み合わせる

RotateとScaleの組み合わせ

回転とスケーリングの両方が必要な場合、単一のtransformプロパティで組み合わせる必要があります。transformを2回設定すると、最初の宣言が上書きされます。

CSS

.icon-button:hover {
  transform: rotateZ(15deg) scaleX(1.2) scaleY(1.2);
  transition: transform 0.2s ease;
}

単一のtransformプロパティが必要な理由

CSSは複数のtransform宣言をマージしません：

/* 誤り：scaleがrotateを上書き */
.element {
  transform: rotateZ(45deg);
  transform: scaleX(1.5) scaleY(1.5); /* rotateが置き換えられる！ */
}

/* 正しい：1つのプロパティで組み合わせ */
.element {
  transform: rotateZ(45deg) scaleX(1.5) scaleY(1.5);
}

順序の影響

transform文字列内のrotateとscaleの順序により、わずかに異なる結果が生まれます：

• 回転してからスケール — 要素が最初に回転し、回転した形状が元の軸に沿ってスケーリングされる
• スケールしてから回転 — 要素が最初にスケーリングされ、スケーリングされた形状が回転する

ほとんどのホバーエフェクトでは視覚的な差は無視できますが、非対称スケーリング（scaleX !== scaleY）の場合は順序が大きく影響します。

実用例：遊び心のあるボタン

.btn {
  transition: transform 0.15s ease;
}
.btn:hover {
  transform: rotateZ(-3deg) scaleX(1.05) scaleY(1.05);
}
.btn:active {
  transform: rotateZ(0deg) scaleX(0.97) scaleY(0.97);
}