HOME
CSSだけで要素を上下左右に反転させるには？
WEBサイトを制作していると画像などの要素を上下や左右に反転して表示させたい場面があります。
特にアイコンや矢印マークなどは使う場所によって向きを変えたいということが多いのではないでしょうか?
要素の反転をCSSだけで実現することができれば、わざわざ反転させた画像を用意しないで済むので時間と手間の削減につながります。
要素の反転にはtransform:scaleを使う
上下の反転も左右の反転もどちらもtransform:scaleを使うことで簡単に実現できます。
transform:scaleは本来要素の拡大縮小を行うプロパティですが、値の指定を仕方によって要素を反転させる効果をもたらします。
CSSの使い方について詳しくはこちらのページをご覧ください。
CSSのセレクターとは？【種類と使い方をわかりやすく解説】
CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります...【もっと読む】
上下に反転させる
まずは要素を上下に反転させる時の記述方法です。
下記のように記述することで要素が上下反転して表示されます。
scaleのカッコの中はX軸とY軸を示しています。今回は上下に反転させたいのでY軸の方に「-」（マイナス）を付けています。
HTML
<div class="test"> <img src="image_arrow_vl.png" alt="テスト用画像"> <img src="image_arrow_vl.png" alt="テスト用画像" class="hanten_tb"> </div>
CSS
.hanten_tb{
transform:scale(1,-1);/*上下反転*/
}
プレビュー
上記の例では左側の矢印が元の画像で、右側が同じデータをtransform:scaleによって上下反転させたものになります。
左右に反転させる
左右に反転させたい場合は先程とは異なり、今度はX軸の方に「-」（マイナス）を付けます。
HTML
<div class="test"> <img src="https://web.skipjack.tokyo/wp-content/uploads/css/hanten/image_arrow_hr.png" alt="テスト用画像"> <img src="https://web.skipjack.tokyo/wp-content/uploads/css/hanten/image_arrow_hr.png" alt="テスト用画像" class="hanten_rl"> </div>
CSS
.hanten_rl{
transform:scale(-1,1);/*左右反転*/
}
プレビュー
こちらも左側の矢印が元の画像で、右側が同じデータをtransform:scaleによって左右反転させたものになります。
回転と反転の使い分け
今回の例で使ったような矢印であれば、上下左右以外にもtransformで回転させることでひとつのデータであらゆる方向に向きを変えることができます。
transformで要素を回転させる際にはrotateを使用し、次のように記述します。
HTML
<div class="test"> <img src="image_arrow_hr.png" alt="テスト用画像"> <img src="image_arrow_hr.png" alt="テスト用画像" class="kaiten1"> <img src="image_arrow_hr.png" alt="テスト用画像" class="hanten_rl"> <img src="image_arrow_hr.png" alt="テスト用画像" class="kaiten2"> </div>
CSS
.kaiten1{
transform:rotate(90deg);
}
.kaiten2{
transform:rotate(-90deg);
}
プレビュー
ここで使用している元データは一番左にある「右を指さしたアイコン」です。反転と回転を使えば一つのデータだけで全方向に向きを変えられます。
まとめ
以上がCSSのtransform:scaleを活用して要素を上下左右に反転させる方法です。transformプロパティを活用すれば一つのデータを元にCSSだけで様々な見せ方に利用できるので効率よくWEBサイトをつくるときにとても役立ちます。
