Weblasts

マウスカーソルが乗った時に要素を回転させてみる

hoverアクションで要素が回転すると楽しそうです。
楽しいだけではなく、少ないスペースに情報を入れることもできるので仕組みをユーザーがわかりさえすればとてもいいUIだと思います。

このサイトも真中付近で使われているカードが裏返るようなUIはユーザーに新しい体験が提供できるように感じます

コードが少しごちゃつきますが書き残しておきます。

今回やりたいこととデモ

今回やりたいことは、マウスカーソルが特定の要素にのったら、要素をy軸を基準に回転させて裏側を表示します。
この時裏側にはコンテンツが隠されており、それが表示状態になるように作っていきます。

HTMLの考え方とコード

まずはHTMLから見ていきます 今回のコードは下のようなコードにしてみました。
二つのコンテンツを作ってcssで重ね合わせていきます。

CSSの考え方とコード

上のHTMLのコード内にも書いてありますが、表と裏にして重ね合わせる必要があります。 ある程度大きさの指定をして、まずは要素を裏返してみます。

このコードで要素の大きさ、隙間などベースとなる指定ができ、裏側に入れるコンテンツを回転させて表示できます。 「overflow」の指定をしていないので裏側のコンテンツははみ出て表示されます。

ここまでの表示状態
ピノさん

なぜか鼻が大変な事になってしまった木彫りの彫刻

ナムコスターズに所属するバントでランニングホームランにしてしまう足の速いキャラそっくりだが、別人のようだ。

transformプロパティ

要素を変形させるプロパティで値には関数を入れて使います。 今回はY軸を基準に回転察せるために「rotateY関数」を使っています。

要素を重ね合わせるにはpositionプロパティを使います。
重ね順の指定や位置の指定も併せて指定しておきましょう

一か所にまとめられたらhoverで動かしていきます。
最終的なコードが下記になります。

hoverしたとき子要素に対して指定する形をとっています
どうしても回転中や、重ね順の影響でhoverが解除されガタガタ動いてしまう場合があるのでこのような形にしています。

今回はIDを使って作ってしまいましたが、class属性を使えばサイト内で使いまわしができますし、工夫してみてください。