CSSで反転画像を表示させたり、マウスオーバー時に回転させるテクニック

CSSで反転画像を表示させたり、マウスオーバー時に回転させるテクニック

CSSで反転画像を表示させたり、マウスオーバー時に回転させるテクニック

CSSのrotate()やscale()関数を使って画像などの要素を上下左右に反転させる事ができます。

常時反転以外にも、ユーザー動作時(マウスオーバー時)に反転させるとお洒落です。

rotateや奥行きを出すperspective、滑らかにするtransitionを駆使して様々な回転演出が可能です。

CSSで反転した画像を表示させる or ユーザー操作で反転させる

WEBデザイン上、画像を上下左右に反転させて表示するケースに遭遇する事があるでしょう。

反転画像を置くのはもちろん、ユーザー動作(マウスオーバーなど)で反転させるとカッコいいギミックになります。

本記事ではCSSを使った画像の反転方法やマウスオーバー時の反転ギミックを実装していきます。

反転させた画像を表示させる

画像の左右や上下を反転させた画像を表示するのは簡単です。

CSSのtransformプロパティを使います。

反転させる関数にはscale()やrotate()などがあります。

CSSのrotate()、scale()の例

//上下反転 transform: rotate(180deg); //左右反転 transform: rotateY(180deg); //上下反転 transform: scale(1, -1); //左右反転 transform: scale(-1, 1);

rotate関数の場合

上下に反転させる場合、横軸方向を反転させるためtransform: scale(1, -1);とします。

左右に反転させる場合、縦軸方向を反転させるためtransform: scale(-1, 1);とします。

scale関数の場合

上下に反転させる場合、横軸方向を反転させるためrotate(180deg);とします。

左右に反転させる場合、縦軸方向を反転させるためrotateY(180deg);とします。

サンプル

反転画像

ご覧の通り、画像の上下がさかさまになっていますね。

常時反転ならscale関数を使う

単純に反転させるだけなら問題ありませんが、他の要素と組み合わせて使用する場合はscale関数の方が良いでしょう。

rotateの場合、画像の中心が真ん中にないときれいに反転してくれない場合があります。

マウスオーバー時に画像を反転させる

ここまでは基本となる画像の常時反転表示でした。

ここからはマウスオーバー時などのユーザー動作で画像を任意の方向に反転させるギミックを紹介します。

単に反転するのではなく滑らかな動きも同時にCSSで実装させていきます。

HTMLソース

<figure class="img-flip"> <img src="images/css_turnover_img2.png" alt="反転画像"> </figure>

上記の様に画像をクラス名を付けたfigureタグで囲みます。

特にaタグは付けておりませんので必要に応じて設置しましょう。

CSS

.img-flip { position: relative; display: inline-block; margin: 0; max-width: 100%; background-color: #2266a5; color: #fff; overflow: hidden; } .img-flip { -webkit-perspective: 50em; perspective: 50em; } .img-flip *{ transition: all 0.35s ease; } .img-flip:hover img { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); }

CSSは今回も含めて、全てベンダープレフィックス付きで表示しています。

img-flipのスタイルは自由に設定してOKです。

パネルの背景は動きがわかりやすい様に青く塗りつぶしています。

CSSの解説

ベースの枠に対し、overflow:hidden;を設定しておきましょう。

これを入れないと回転動作が枠の外側まで飛び出して見える様になります。

ストレスを与えない様、overflow:hidden;で反転ギミックを枠内に留めておきます。

「.img-flip *」の部分

「.img-flip *」はワイルドカードによる表現で、img-flipで構成された中身全てという意味です。

transition: all 0.25s ease;で、全体の回転速度を調整しています。

perspectiveとは

これは回転時の奥行きを表現するのに使います。

perspectiveは、回転時に枠の奥側をパネルが移動する効果を担っています。

これがあるのと無いのとでは回転する動きが違って見えます。

実際にこの関数を付け外しして、表示を確認するとその違いがわかります。

回転動作はrotate()で

今回は回転動作をrotate関数で実現しています。

これをscale関数で行うと、perspectiveを使っていても画像パネルが回転する演出効果が出せません。

ですのでここではtransform: rotateX(-180deg);で、縦方向に回転させています。

それに対しrotateY(-180deg)とすると、今度は横方向に回転してくれるようになります。

サンプル

反転画像

マウスを乗せると画像が上下に反転します。

回転する際に枠の奥をパネルが通る様に見えますよね。これがperspectiveによる効果です。

これが無いと回転ではなく、写真の高さがゼロに縮んで裏返ってくる様に見えてしまいます。

マウスオーバー時に別パネルを表示させる

最後に紹介するのは応用編です。

画像を反転させつつ透明にしてしまい、代わりに別のパネルを表示させます。

この時出すパネルも、画像と同様に回転効果を出しつつ表示させます。

こういったギミックを用意できるとデザイン性がぐっと上がりますよね。

HTMLソース

<figure class="img-flip"> <img src="images/css_turnover_img2.png" alt="反転画像"> <figcaption> <h3>マウスオーバー時の回転ギミック</h3> <p>画像反転と時に出現するパネルです。</p> </figcaption> <a href="リンク先URL"></a> </figure>

CSS(前回分と重なるところ多し)

//絶対配置で上に重ねる .img-flip figcaption { background-color: #135796; color: #ffffff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; //透明 } //同様にさらに上に重ねる .img-flip a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } //全体を滑らかに動かす .img-flip *{ transition: all 0.35s ease; } //奥行きを表現 .img-flip { -webkit-perspective: 50em; perspective: 50em; } //透明解除と動作遅延 .img-flip:hover figcaption { opacity: 1; transition-delay: 0.14s; } //マウスオーバー時の画像回転 .img-flip:hover img { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } //パネル部分の動作前 .img-flip figcaption { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } //マウスオーバー時の動作 .img-flip:hover figcaption { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); }

CSSの解説

ベースとなるfigureに対し、figcaptionとaリンクタグをそれぞれ絶対配置で上に重なる様に配置します。

figcaptionのエリアは、opacity:0;で透明にしておきます。

マウスオーバー時の演出

「.img-flip:hover figcaption」のところでopacity: 1;で見える様にします。

その際delayを0.14sとする事で、演出開始時間が少しだけずれます。

画像の回転に対し少し遅れて回転し始めますので、非常にかっこよくなる訳です。

別パネルの立ち上がり動作

マウスオーバー時に表示されるパネル部分のCSSです。

.img-flip figcaption { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; }

別パネルは単にopacity0を1にする事で徐々に表示されるだけではありません。

上記の2つのスタイルで、パネルを横に2つ折りしたような形にしています。

2つに折った「折り目部分」しか見えていない様な感じですね。

それがマウスオーバー時に「transform: rotateX(0deg);」で通常の状態に戻されます。

これにより2つに折られたパネルが奥から立ち上がってくる(回転する)ような演出がされます。

サンプル

反転画像

マウスオーバー時の回転ギミック

画像の回転に対しパネルを逆方向に回転させ、かつ双方の動作タイミングを少しずらしています。各コンテンツへのリンクパネルなどに使えると思います。

回転ギミックには豊富な種類がありますので、調べてみて下さい。

この記事をシェアする

一押し人気コーナー紹介

CSS関連記事