マウスカーソルが乗った時に要素を回転させてみる
hoverアクションで要素が回転すると楽しそうです。
楽しいだけではなく、少ないスペースに情報を入れることもできるので仕組みをユーザーがわかりさえすればとてもいいUIだと思います。
このサイトも真中付近で使われているカードが裏返るようなUIはユーザーに新しい体験が提供できるように感じます
コードが少しごちゃつきますが書き残しておきます。
今回やりたいこととデモ
今回やりたいことは、マウスカーソルが特定の要素にのったら、要素をy軸を基準に回転させて裏側を表示します。
この時裏側にはコンテンツが隠されており、それが表示状態になるように作っていきます。
HTMLの考え方とコード
まずはHTMLから見ていきます
今回のコードは下のようなコードにしてみました。
二つのコンテンツを作ってcssで重ね合わせていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="box"> <img src="pino.png" alt=""><!--最初表示している画像（表側）--> <div id="wrap"><!--hoverで出てくるコンテンツ（裏側）--> <img src="pino.png" alt=""> <section> <h2>ピノさん</h2> <p> 嘘をついたため鼻が大変な事になってしまった木彫りの彫刻 </p> <p> ナムコスターズに所属するバントでランニングホームランにしてしまう足の速いキャラそっくりだが、別人のようだ。 </p> </section> </div> </div> |
CSSの考え方とコード
上のHTMLのコード内にも書いてありますが、表と裏にして重ね合わせる必要があります。 ある程度大きさの指定をして、まずは要素を裏返してみます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/*全体の大きさ指定*/ #box{ max-width: 500px; max-height: 400px; margin: 0 auto; } /*表のimgを親要素一杯に広げる*/ #box>img{ display: block; margin: 0 auto; z-index: 100; width: 100%; height: 100%; object-fit: cover; } /*裏側のコンテンツ全体*/ #wrap{ width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; padding: 30px; box-sizing: border-box; transform: rotateY(180deg);/*要素を回転させる*/ } /*裏側のコンテンツ内のimg*/ #wrap img{ width: 40%; object-fit: cover; filter: grayscale(100%);/*imgをグレースケールに*/ } /*裏側のコンテンツ内の文章*/ #wrap section{ width: 60%; padding: 0 0 0 10px; } |
このコードで要素の大きさ、隙間などベースとなる指定ができ、裏側に入れるコンテンツを回転させて表示できます。 「overflow」の指定をしていないので裏側のコンテンツははみ出て表示されます。
なぜか鼻が大変な事になってしまった木彫りの彫刻
ナムコスターズに所属するバントでランニングホームランにしてしまう足の速いキャラそっくりだが、別人のようだ。
transformプロパティ
要素を変形させるプロパティで値には関数を入れて使います。 今回はY軸を基準に回転察せるために「rotateY関数」を使っています。
要素を重ね合わせるにはpositionプロパティを使います。
重ね順の指定や位置の指定も併せて指定しておきましょう
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
#box{ position: relative;/*追加*/ max-width: 500px; max-height: 400px; margin: 0 auto; } #box>img{ display: block; margin: 0 auto; transition:1s;/*追加*/ position: relative;/*追加*/ z-index: 100;/*追加*/ width: 100%; height: 100%; object-fit: cover; } #wrap{ width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; padding: 30px; box-sizing: border-box; transform: rotateY(180deg); transition:1s;/*追加*/ position: absolute;/*追加*/ top: 0;/*追加*/ z-index: 0;/*追加*/ } #wrap img{ width: 40%; object-fit: cover; filter: grayscale(100%); } #wrap section{ width: 60%; padding: 0 0 0 10px; } |
一か所にまとめられたらhoverで動かしていきます。
最終的なコードが下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
#box{ position: relative; max-width: 500px; max-height: 400px; margin: 0 auto; } #box>img{ display: block; margin: 0 auto; transition:1s; position: relative; z-index: 100; width: 100%; height: 100%; object-fit: cover; } /*hover追加分*/ #box:hover > img{ transform: rotateY(180deg);/*要素を裏返す*/ z-index: 0;/*背面にするため*/ } #box:hover #wrap { transform: rotateY(0deg);/*裏返した要素を元に戻す*/ z-index: 100;/*前面に出すため*/ } /*hover追加分ここまで*/ #wrap{ width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; padding: 30px; box-sizing: border-box; transform: rotateY(180deg); transition:1s; position: absolute; top: 0; z-index: 0; } #wrap img{ width: 40%; object-fit: cover; filter: grayscale(100%); } #wrap section{ width: 60%; padding: 0 0 0 10px; } |
hoverしたとき子要素に対して指定する形をとっています
どうしても回転中や、重ね順の影響でhoverが解除されガタガタ動いてしまう場合があるのでこのような形にしています。
今回はIDを使って作ってしまいましたが、class属性を使えばサイト内で使いまわしができますし、工夫してみてください。
