サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

画像を反転させる(CSS:rotateX・Y)

画像を反転させる(CSS:rotateX・Y)

この記事にはプロモーションが含まれています。

同じ画像でも左右や上下に反転させることでイメージが変わり、違う画像を使っているように見せることができます。
画像編集ソフトで画像を反転→保存して画像を配置する方が楽ではありますが、手間をかけてCSSで反転させるメリットは大きいです。(どのようなメリットがあるかは本記事のワンポイントチェックで!)

今回は、画像(要素)を反転させることができる、rotateX( )・rotateY( )を紹介していきます。

– 目次 –

動画内容:画像の反転

まず最初に、画像の反転の活用シーンを具体的にイメージできるよう、サンプルを用意しました。それぞれ2つのドーナツの画像を配置していますが、これらの画像は全く同じものです。

上のサンプルは2つのドーナツの画像をそのまま配置しています。
それに対し、下のサンプルは片方のドーナツの画像を左右反転させています。

2つのサンプルを見比べてみて、皆さんはどのようなイメージを持ちますか?

2021

8/31

2021

8/31

感じ方は人それぞれだと思いますが、画像に手を加えなかった上のサンプルは、全く同じ画像が配置されていることが丸わかりで、手抜き感や違和感がある…と言えます。

一方、片方の画像を反転させた下のサンプルは、ぱっと見では全く同じ画像だと認識されず、自然なイメージ…になります。

もちろん、rotate( )で画像を回転させても良いのですが、自由に回転させるのではなく、反転(左右反転・上下反転)させたい場合は今回紹介するrotateX( )・rotateY( )を使った方が早くて便利です。

画像をビシッと180°反転させたいというシーンは多いので、rotate( )だけでなく、rotateX( )・rotateY( )の基本もしっかり押さえておきましょう!

rotateX・Yの基本

画像を反転させる方法を紹介する前に、まずはrotateX( )・rotateY( )の基本的な仕様を解説していきます。
まずはじめに、rotateX( )・rotateY( )は、rotate( )と同じくtransfromプロパティの値です。

CSS解説: transformプロパティ

そして今回、「画像の反転」というタイトルを付けていますが、rotateX( )やrotateY( )では、画像要素(imgタグ)に限らず様々な要素を反転させることができます。

ただ、rotate( )で少しだけ傾ける場合と違って、反転させるとテキストなどの要素は読みづらくなってしまいますし、反転させたい対象は結局、画像であることがほとんどと言えます。

テキスト要素などに反転を適用させてしまうとどうなるか、参考までにサンプルを置いておきます。

テキストが反転して読みづらい!

ものすごく読みづらいですね笑。このように、テキストを反転させる機会などまずありません。
同じ理由で、画像であっても文字を含む画像をCSSで反転することはないと言えます。

また、今回は反転(左右反転・上下反転)に絞って説明しますが、rotateX・Yは本来、要素を反転させる専用のCSSではありません。

正確にはX軸(横)やY軸(縦)を中心に、要素を(立体的に)回転させるCSSです。

要素を立体的に横・縦に回転させた結果、ある角度(180°)で反転させられるという仕組みです。
…と言っても、立体的に回転ってちょっとイメージしづらいですよね。

そこで、イメージをつかめるように、ボタンをクリックするとrotateX・Yで回転させられる立体要素のサンプルを用意しました。立体的に回転する様子がわかると思います。

front
back
right
left
top
bottom

というわけで、rotateX・Yは、あくまで画像の反転できるCSSということを基礎知識として知っておきましょう。

    POINT!
  1. ・rotateX・Yは画像だけでなくテキストなども反転させられる!(出番はない)
  2. ・反転専用のCSSではなく、横軸/縦軸を中心に要素を回転させる!
  3. ・ただし、実際は画像の反転目的で使われることが多い!

画像を左右に反転させる

画像の反転は、どちらかと言うと上下よりも左右に反転させたい場合が多いので、先に左右反転から説明します。

画像を左右に反転させるには、対象の画像をセレクタに指定した上で、transform: rotateY(180deg)と指定します。

左右反転=rotateY(180deg)…と、呪文のように覚えてしまっても良いのですが、「Y軸(縦軸)を軸に要素を回転させる=左右に反転する」と、理屈で理解しておくと忘れません。

それでは、サンプルの表示結果とコードの紹介です。(反転させる前の画像も掲載しておきます)

フライパンの画像

▲反転する前

フライパンの画像

▲左右に反転

    <div class="rotatey_box">
      <div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲反転する前</p>
      </div>
      <div>
        <img class="rotatey_img" src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲左右に反転</p>
      </div>
    </div>

      .rotatey_box {
        display: flex;
        justify-content: center;
        gap: 20px;
      }
      .rotatey_box img {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 2rem auto;
      }
      .rotatey_box p {
        text-align: center;
        font-size: .8rem;
        color:tomato;
      }
      .rotatey_img {
        transform: rotateY(180deg);
      }

反転させたい場合、rotateY( )の数値はどんな画像でも180°の指定でOKです。
たとえば上で紹介したサンプル画像のように、元の画像がまっすぐではなく傾いていたとしても、rotateYの指定数値を変える必要はありません。

むしろ、二次元の画像をrotateYで中途半端な角度に回転させると、画像が歪んでしまいます。

参考までに、rotateY(45deg)と指定したサンプル画像を用意しました。画像がぐにゃっとしてしまっています。

フライパンの画像

▲rotateY(45deg)

基本的に、Webページは二次元(平面)で構成されるので、要素を3D回転させたいことはほとんどありません。なので、rotateYやrotateXを使う場合、角度の指定はほぼ180°しか使わないと思っても良いぐらいです。

    POINT!
  1. ・画像を左右に反転させたい場合は、rotateY( )を使う!
  2. ・どんな画像でも、rotateYの指定数値は180degでOK!
  3. ・二次元の画像を中途半端に立体回転させると、画像が歪んでしまう!

画像を上下に反転させる

画像を上下に反転させる場合は、rotateX(180deg)を適用させます。

X軸(横軸)を中心に画像が立体回転するので、180°のところでちょうど上下が反転するというわけですね。
指定の仕方はrotateYと全く同じなので、さっそくサンプルの表示結果とコードを見ていきましょう。

フライパンの画像

▲反転する前

フライパンの画像

▲上下に反転

    <div class="rotatex_box">
      <div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲反転する前</p>
      </div>
      <div>
        <img class="rotatex_img" src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲上下に反転</p>
      </div>
    </div>

      .rotatex_box img {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 2rem auto;
      }
      .rotatex_box p {
        text-align: center;
        font-size: .8rem;
        color:tomato;
      }
      .rotatex_img {
        transform: rotateX(180deg);
      }

rotateXで上下反転させる場合も、角度の指定は180degでOKです。

また、rotateYと同じように、二次元の画像を中途半端な角度で立体回転させると画像が歪んでしまいます。(下のサンプルを参照)

フライパンの画像

▲rotateX(45deg)

わざと画像を少し歪めたい場合に利用できなくもないですが…それならば、画像を作成する段階で調整しておいた方が良いですし、やはり基本的に180deg以外を指定することはないと思って差し支えないかと思います。
※もちろん、立体的な要素を立体的に回転させたい場合は別です


また、上下が反転しても違和感が出ないイラストや写真はあまり多くはありません。
ので、どちらかというと左右の反転ができるrotateY(180deg)の方が出番は多いと言えるでしょう。

    POINT!
  1. ・画像の上下反転はrotateXを使う!
  2. ・角度の指定は180degでOK!
  3. ・どちらかと言うと、上下よりは左右反転の方が使用頻度は高い!

画像を上下左右に反転させる

左右と上下の反転は組み合わせることが可能です。その場合、rotateXとrotateYの両方を適用させます。

transformプロパティには本記事で紹介しているrotateX・Yの他にも様々な値がありますが、変形を組み合わせることが可能です。
そして複数の変形を組み合わせる場合、,(カンマ)などで値を区切らずに、半角スペースを空けて続けて値を記述します。

たとえば画像を上下左右の両方に対して反転させたい場合は、以下のように記述します。

transform: rotateX(180deg) rotateY(180deg)

それでは左右上下に反転したサンプル画像と、そのCSSコードを確認していきましょう。

フライパンの画像

▲反転する前

フライパンの画像

▲上下左右に反転

    <div class="rotatexy_box">
      <div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲反転する前</p>
      </div>
      <div>
        <img class="rotatexy_img" src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲上下左右に反転</p>
      </div>
    </div>

      .rotatexy_box {
        display: flex;
        justify-content: center; 
        gap: 20px;
      }
      .rotatexy_box img {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 2rem auto;
      }
      .rotatexy_box p {
        text-align: center;
        font-size: .8rem;
        color:tomato;
      }
      .rotatexy_img {
        transform: rotateX(180deg) rotateY(180deg);
      }

ちなみにですが、rotateX・Yの指定順序を入れ替えて、rotateY(180deg) rotateX(180deg)としても表示結果は同じになります。

当たり前じゃん!…と思うかもしれませんが、transformプロパティの変形は、同じ指定数値でも指定する順番によって表示結果が変わることがあるので、注意が必要です。(例として、translate→rotateと、rotate→translateでは、同じ数値指定でも表示結果が変わります)

ただ、繰り返しになりますが上下左右反転させるだけであれば、rotateX・Yの指定順序を気にする必要はありません。

さらに補足ですが、上下左右の反転はすなわち点対称ということになります。
左右のみの反転、上下のみの反転は、rotate( )では画像や図形によってはできませんが、点対称であればrotate(180deg)としても同じ結果にできます。

    POINT!
  1. ・画像を上下左右に反転させる場合は、rotateX・Yを両方指定する!もしくはrotateで指定する!
  2. ・角度の指定はどちらも180degで指定する!
  3. ・上下左右の反転のみであれば、rotateX・Yの指定順序を気にする必要はない!

ワンポイントチェック

画像の反転は、Photoshopなどの専門的な画像編集ソフトを使わずとも、無料のフォトアプリで簡単にできます。
ワンクリックでできますし、アプリで反転させてからWebページに配置した方が早くて効率が良いです。反転する前の画像を使わないのであれば、こちらの方法が断然おすすめです。

ですが、反転させない画像と、反転した画像の両方を使う場合、多少手間をかけてでもCSSで画像を反転させるメリットは大きいです。

そのメリットとはズバリ、画像が1つ分ですむ(その分Webページを軽くできる)という点です。

元の画像を「画像A」、画像編集ソフトで反転させた画像を「画像B」とすると、画像Aと画像Bは別のファイルとして保存され、それぞれサーバーにアップロードする必要があります。(▼サンプル参照)

三角形の画像
三角形の画像

しかし、画像AをCSSで反転させれば、必要な画像はAだけで良いということになります。(▼サンプルは文字を含めた画像なのでアレですが)

三角形の画像
三角形の画像

サーバーへの画像のアップロードの手間が省けるのはもちろん、Webページを軽量化できることで、SEO対策にもなります。
*Webサイトが軽く、高速表示できるかどうかという点は、検索表示結果に影響するとGoogleが明言しています*

小さいサイズのアイコンなど、ものすごく軽い画像であれば2つ分の画像を用意して良いと思いますが、ある程度容量のある画像であればCSSで反転させるのが良いと言えます。


今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .rotateXY_box {
        display: flex;
        justify-content: center;
        gap: 250px;
        text-align: center;
        color: tomato;
        margin: 400px auto;
      }
      .rotateY img {
        transform: rotateY(180deg);
      }
      .rotateX img {
        transform: rotateX(180deg);
      }
      .rotateXY img {
        transform: rotateX(180deg) rotateY(180deg);
      }

    </style>
  </head>
  <body>
    <div class="rotateXY_box">
      <div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲反転前の元画像</p>
      </div>
      <div class="rotateY">
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲左右に反転</p>
      </div>
    </div>

    <div class="rotateXY_box">
      <div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲反転前の元画像</p>
      </div>
      <div class="rotateX">
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲上下に反転</p>
      </div>
    </div>

    <div class="rotateXY_box">
      <div>
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲反転前の元画像</p>
      </div>
      <div class="rotateXY">
        <img src="https://web-de-asobo.net/wp-content/uploads/2021/07/medamayaki-400.png" alt="フライパンの画像">
        <p>▲上下左右に反転</p>
      </div>
    </div>


  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン