• HOME > 
  • CSS > 
  • CSSだけで要素を上下左右に反転させる方法【transfor...

CSSだけで要素を上下左右に反転させる方法【transform:scaleを使ったテクニックを解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

CSSだけで要素を上下左右に反転させるには?

WEBサイトを制作していると画像などの要素を上下や左右に反転して表示させたい場面があります。

特にアイコンや矢印マークなどは使う場所によって向きを変えたいということが多いのではないでしょうか?

要素の反転をCSSだけで実現することができれば、わざわざ反転させた画像を用意しないで済むので時間と手間の削減につながります。

要素の反転にはtransform:scaleを使う

上下の反転も左右の反転もどちらもtransform:scaleを使うことで簡単に実現できます。

transform:scaleは本来要素の拡大縮小を行うプロパティですが、値の指定を仕方によって要素を反転させる効果をもたらします。

リンク先のサムネイル
CSSのセレクターとは?【種類と使い方をわかりやすく解説】

CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります...【もっと読む】

上下に反転させる

まずは要素を上下に反転させる時の記述方法です。

下記のように記述することで要素が上下反転して表示されます。

scaleで上下に反転させる書き方

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軸の方に「-」(マイナス)を付けます。

scaleで左右に反転させる書き方

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を使用し、次のように記述します。

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サイトをつくるときにとても役立ちます。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。