【CSS】画面奥から文字や画像を拡大 / 回転させる(3Dアニメーション)

【メイン画像】CSSで3Dアニメーションを実装する方法

この記事では、マウスをホバーしたときにテキストや図形を立体的に変化させるアニメーション(3Dアニメーション)の実装方法について紹介しています。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例

下記テキスト「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」プロパティを使用した、マウスホバーやボタンクリック(タップ)に反応するアニメーションは以下でも紹介しています。

画面奥から拡大

<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アニメーションの中でもシンプルな例を取り上げましたが、応用すればより複雑でユニークなアニメーションを実装することもできます。

記述にクセはありますが、本実装例をもとにいろいろなパターンを模索してみてはいかがでしょうか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次