この記事では、マウスをホバーしたときにテキストや図形を立体的に変化させるアニメーション（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】文字や画像をホバーしたときにズームイン＆暗くする
マウスを置いた（ホバーした）とき、文字や画像などの要素を拡大（要素サイズからはみ出た部分は非表示）したり暗くしたりする実装方法を紹介します。自分の学習・メモ…
あわせて読みたい
【JS&CSS】クリック（タップ）で画像を拡大させる
transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…
画面奥から拡大
<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アニメーションの中でもシンプルな例を取り上げましたが、応用すればより複雑でユニークなアニメーションを実装することもできます。
立体的にくるくる回り続けるコインの例
好きな確率で当たりが出るコイン
「当たり」が出る確率を自由に操作できるコインを作ってみました。任意の確率で当たり判定をしたい場合にご利用ください！ ％の確率で当たりが出ます。 使い方 インプッ…
記述にクセはありますが、本実装例をもとにいろいろなパターンを模索してみてはいかがでしょうか？
他にも当サイトでは、関連するアニメーションとして以下のような実装方法も紹介しています。
あわせて読みたい
【CSS】テキストなどの要素をスライド表示するアニメーション
本記事では、以下のように指定したテキストなどをゆっくり／徐々に表示するアニメーション（スライドイン）の実装方法を紹介します。（ボタンをクリックすると、実装し…
あわせて読みたい
【JS&CSS】モーダルウィンドウの作り方
ボタンクリックで、画面中央にフワッと別ウィンドウを表示させる方法（モーダルウィンドウの作り方）について、HTML / CSS / JavaScriptコードを公開します。 モーダル…
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開していますので、自…