こんにちは、フロントエンドエンジニアのはっちゃんです。
今日は「コインがホバーで回転するアニメーション」を作っていきたいと思います。
LIGブログのメンバーページでも使われていますが、メンバーページのものはスマホでフリップした際のアニメーションもつけているので、ちょっと高度です。
今回紹介するものは、ホバーのみのアニメーションです。
画像を用意
表と裏の画像を用意します。とりあえず自分の画像を使うことにします。
コーディングの考え方
- コインの表と裏をposition: absolute;で重なり合うようにする
- コインの裏は、めくったときに反転してしまうので、transform: rotateY(180deg);であらかじめ回転させておく
- .flip-innerにpreserve-3dをつけて、子要素に3Dの概念を適用する
- コイン両面にbackface-visibility: hidden;をつけて裏側を表示しないようにする
- コインの表にtransform: translateZ(1px);をつけて完全に重ならないようにする
HTML
<div class="flip">
<div class="flip-inner">
<div class="front">
<img class="thumbnail" src="https://82mou.github.io/src/images/coin-omote.jpg" alt="コイン表">
</div>
<div class="back">
<img class="thumbnail thumbnail-hover" src="https://82mou.github.io/src/images/coin-ura.jpg" alt="コイン裏">
</div>
</div>
</div>
SCSS
.flip {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
&:hover {
.flip-inner {
transform: rotateY(180deg);
}
}
.flip-inner {
transform-style: preserve-3d;
transition: transform .8s ease;
height: 100%;
width: 100%;
.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 50%;
overflow: hidden;
}
.front {
transform: translateZ(1px);
}
.back {
transform: rotateY(180deg);
}
.thumbnail {
width: 100%;
}
}
}
デモ
See the Pen
coin rotation animation on the hover by k_hatsushi (@hatsushi_kazuya)
on CodePen.
まとめ
いかがでしたか?
preserve-3dはIE11非対応ですが、今後は当たり前のようにつかわれていくプロパティのひとつだと思います。
今のうちにいろいろな3D表現を作っておくと、リッチなアニメーションを提案できて評価がアップするかも……?
みなさんぜひ遊んでみてくださいね!
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。