この記事では、マウスをホバーしたときにテキストや図形を立体的に変化させるアニメーション（3Dアニメーション）の実装方法について紹介しています。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！
目次
実装例
下記テキスト「Hello World」にマウスをホバーすると、テキストが3Dアニメーションします。
画面奥から拡大
Hello World
パタッと降りる
Hello World
180℃回転
Hello World
HTML / CSS コード
3Dアニメーションを実装するには、実装したい要素の親要素に以下2つのプロパティをセットするところから始めます。
transform-style: preserve-3d;
perspective: ;
/* perspectiveにセットする値は「1000px」のように数値とpxの組み合わせ */続いて3Dアニメーションを実装したい要素に、「transform」プロパティを設定します。
上の実装例で用いているのは以下のようなプロパティを設定しています。
/* 要素に奥行を持たせる場合 */
transform: translate3d(0, 0, -2000px);
/* 要素をX軸方向に90°回転させる場合 */
transform: rotateX(90deg);
/* 要素をY軸方向に180°回転させる場合 */
transform: rotateY(180deg);- 各数値は、好みによって調整してください。
- 「translate3d」を設定すると、要素をX軸(横方向)・Y軸(縦方向)・Z軸(奥行)の3つで移動させられます。
- 「rotateX」でX軸を中心に、「rotateY」でY軸を中心に回転させられます。
上記に加えて「transform-origin」プロパティを加えると、アニメーションの起点を変えられます。（デフォルトでは「transform-origin: center;」（要素の中心が起点）となっています。）
シンプルな2Dアニメーションについてはこちら
「transform」と「transition」プロパティを使用した、マウスホバーやボタンクリック（タップ）に反応するアニメーションは以下でも紹介しています。
あわせて読みたい
ホバーアニメーションの実装解説｜CSS Hover Animation
ホバーアニメーション デザイン詳細 CSS の transform とオーバーレイ要素を使って、マウスホバー時にズームや暗転を加える基本パターンを整理した詳細ページです。元記…
あわせて読みたい
クリック・ホバーで画像を拡大表示する実装解説｜transform scale CSS & JS Guide
拡大表示 デザイン見本 CSSの transform: scale() を使い、要素をホバーやクリックで拡大表示する実装デモです。ホバーで拡大（CSS のみ）・クリックで即座に拡大・クリ…
画面奥から拡大
<div>
<p>Hello World</p>
</div>div {
text-align: center;
transform-style: preserve-3d;
perspective: 2000px;
}
p {
font-size: 32px;
transform: translate3d(0, 0, -2000px);
transition: transform 0.3s;
}
p:hover {
transform: none;
}パタッと降りる
<div>
<p>Hello World</p>
</div>div {
text-align: center;
transform-style: preserve-3d;
perspective: 500px;
}
p {
font-size: 32px;
transform: rotateX(90deg);
transform-origin: top center;
transition: transform 0.3s;
}
div:hover p {
transform: none;
}180℃回転
<div>
<p>Hello World</p>
</div>div {
text-align: center;
transform-style: preserve-3d;
perspective: 500px;
}
p {
font-size: 32px;
transform: rotateY(180deg);
transition: transform 0.5s;
}
p:hover {
transform: none;
}まとめ & その他の目を惹くアニメーション
以上、CSSで3Dアニメーションを実装する方法について紹介しました。
今回は3Dアニメーションの中でもシンプルな例を取り上げましたが、応用すればより複雑でユニークなアニメーションを実装することもできます。
立体的にくるくる回り続けるコインの例
Webコイントスツール（確率任意設定、300枚まで同時振り対応）
「当たり」が出る確率を自由に操作できるコイントスです。任意の確率で当たり判定をしたい場合などにご利用ください。一度に投げるコインの数は最大300枚まで増やせて、…
記述にクセはありますが、本実装例をもとにいろいろなパターンを模索してみてはいかがでしょうか？
他にも当サイトでは、関連するアニメーションとして以下のような実装方法も紹介しています。
あわせて読みたい
スライドイン表示 実装解説｜CSS Slide-in Animation Guide
スライドイン表示 デザイン見本 CSS の animation と @keyframes、clip-path: inset() を組み合わせて、要素を左右上下の方向からスライドイン表示する実装パターンをま…
あわせて読みたい
モーダルウィンドウ 実装解説｜Modal Window CSS & JS Guide
モーダルウィンドウ デザイン見本 ボタンクリックで画面中央にオーバーレイ表示するモーダルウィンドウの実装解説。瞬時切り替えとフェードアニメーションの2パターンの…
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい…