【CSS】transformが効かない4つの原因と解決方法

「transformを指定したのに回転してない!?」

「transformを指定したら思った位置に行かない!?」

transformが効かない4つの原因と解決方法を解説します。

【原因1】インライン要素に指定している

transformはaタグやspanなどのインライン要素に指定しても効きません。

↓「transform:rotate(45deg)」が効かない

<style>
.example{
    transform: rotate(45deg);
}
</style>
<span class="example">テキスト</span>

【解決】display:inline-blockを指定する

「display:inline-block」や「display:block」などを指定してインライン要素以外の要素にしましょう。

↓「display:inline-block」を指定したら効く

<style>
.example2{
    /*コレ*/display: inline-block;
    transform: rotate(45deg);
}
</style>
<span class="example2">テキスト</span>

【原因2】transformを複数回指定している

transformの値はtranslate(移動)、rotate(回転)、scale(伸縮)、skew(傾斜)を指定できますが、これをそれぞれ違うCSSだと勘違いしてtransformを複数回指定してしまうと、最後のtransform以外はかき消されてしまいます。

↓後に書いた「transform:translateX(50%)」は効いているが、先に書いた「transform:rotate(45deg)」が効かない

<style>
.example3{
    transform: rotate(45deg);
    transform: translateX(50%);
}
</style>
<img class="example3" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

【解決】一行で指定する

transformの各値は半角スペースで挟んで一行で指定しましょう。

<style>
.example4{
    transform: translateX(50%) rotate(45deg);
}
</style>
<img class="example4" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

【原因3】transformの指定順によって結果が異なる

下記は画像を傾けて右にずらしたいのに右下にずれてしまった例です。

transformは左から順に効くため「transform: rotate(45deg) translateX(50%)」と指定すると45度傾いてから傾いた方向に50％ずれてしまいます。

<style>
.example5{
    transform: rotate(45deg) translateX(50%);
}
</style>
<img class="example5" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

【解決】指定順を変える

transformの値を複数指定していて思った動きでないときは値を入れ替えてみましょう。

「transform: translateX(50%) rotate(45deg)」と指定すると、50%ずれてから45度傾きます。

<style>
.example4{
    transform: translateX(50%) rotate(45deg);
}
</style>
<img class="example4" width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

【原因4】transitionと間違えている

「transform」と「transition」は頭の5文字「trans」まで同じで見間違えやすいです。

その上どちらもアニメーションの動きをさせるときに使うため間違いやすいです。

値も含めてその他スペルミスなどしていないか確認しましょう。

間違い例

• × translateX(50%,0)→○ translateX(50%)またはtranslate(50%,0)
• × rotate(45°)→○rotate(45deg)
• × rotate(45deg;)→○rotate(45deg);

【まとめ】transformが効かない4つの原因と解決方法

• 【原因1】インライン要素に指定している
  →【解決】display:inline-blockを指定する
  
• 【原因2】transformを複数回指定している
  →【解決】一行で指定する
  
• 【原因3】transformの指定順によって結果が異なる
  →【解決】指定順を変える
  
• 【原因4】transitionと間違えている
  →【解決】見直す

以上、transformが効かない4つの原因と解決方法でした。