技術

CSS Tips

テキストが上に回転するホバーエフェクト

CSS 3D Transformを使って、2つのテキストがホバーで切り替わる印象的なエフェクトを作成しましょう。

コーディング css animation

はじめに

ホバー時にテキストが回転して別のテキストに切り替わるエフェクトは、言語切り替えやメニュー項目など様々な場面で活用できます。

この記事では、CSS 3D Transformを使って、テキストがX軸方向に回転するホバーエフェクトを実装する方法を紹介します。

完成デモ

下のテキストにマウスを乗せてみてください。英語が上に回転して消え、日本語が現れます。

プレビュー
delcano デルカノ
HTML
<div class="demo-rotate-container">
  <div class="demo-rotate-wrapper">
    <span class="demo-rotate-text demo-rotate-text--front">delcano</span>
    <span class="demo-rotate-text demo-rotate-text--back">デルカノ</span>
  </div>
</div>
CSS
.demo-rotate-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.demo-rotate-wrapper {
  width: 12rem;
  height: 5rem;
  position: relative;
  cursor: pointer;
}

.demo-rotate-text {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  font-size: 2rem;
  font-weight: 700;
  transform-style: preserve-3d;
  transition: rotate 0.4s ease;
  transform-origin: center 50% -1.5rem;
  color: #667eea;
  user-select: none;
}

.demo-rotate-text--front {
  rotate: x 0deg;
}

.demo-rotate-text--back {
  color: #764ba2;
  rotate: x -90deg;
}

.demo-rotate-wrapper:hover .demo-rotate-text--front {
  rotate: x 90deg;
}

.demo-rotate-wrapper:hover .demo-rotate-text--back {
  rotate: x 0deg;
}

仕組みの解説

このエフェクトは、2つのテキストを重ねて配置し、ホバー時にそれぞれX軸方向に回転させることで実現しています。

ポイントは以下の3つです：

1. **2つのテキストを重ねて配置**
同じ位置に2つのテキストを絶対配置し、初期状態で片方を-90度回転させて見えなくします。

2. **transform-originのZ軸オフセット**
transform-origin: center 50% -1.5rem でZ軸方向にオフセットを設定することで、テキストが奥行きを持って回転し、見切れを防ぎます。

3. **rotateプロパティで簡潔に記述**
CSSの新しいrotateプロパティを使って、rotate: x 90deg のように軸を指定して回転を記述できます。

HTMLコード

<div class="rotate-wrapper">
  <span class="rotate-text rotate-text--front">delcano</span>
  <span class="rotate-text rotate-text--back">デルカノ</span>
</div>

CSSコード

.rotate-wrapper {
  width: 12rem;
  height: 5rem;
  position: relative;
  cursor: pointer;
}

.rotate-text {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  font-size: 2rem;
  font-weight: 700;
  transform-style: preserve-3d;
  transition: rotate 0.4s ease;
  transform-origin: center 50% -1.5rem;
  user-select: none;
}

.rotate-text--front {
  color: #667eea;
  rotate: x 0deg;
}

.rotate-text--back {
  color: #764ba2;
  rotate: x -90deg;
}

.rotate-wrapper:hover .rotate-text--front {
  rotate: x 90deg;
}

.rotate-wrapper:hover .rotate-text--back {
  rotate: x 0deg;
}

各プロパティの役割

transform-origin の Z軸オフセット

transform-origin: center 50% -1.5rem でZ軸方向にオフセットを設定。これにより回転時にテキストが奥行きを持って回転し、見切れを防ぎます。

rotate プロパティ

CSSの新しい rotate プロパティを使用。rotate: x 90deg のように軸を指定して回転できます。transformより簡潔に書けます。

transform-style: preserve-3d

子要素の3D変形を保持します。これがないと、子要素は平面的に描画されてしまいます。

inset: 0

top, right, bottom, left をすべて 0 に設定するショートハンド。親要素と同じサイズで重なり合うようにします。

place-items: center

Grid内でコンテンツを縦横中央に配置するショートハンドプロパティです。

user-select: none

テキストの選択を無効にします。ホバー時に誤ってテキストが選択されるのを防ぎます。

応用例

このテクニックは様々な場面で活用できます。

**言語切り替え**
デモのように、英語と日本語を切り替えて表示するのに最適です。

**価格表示**
通常価格とセール価格をホバーで切り替える演出ができます。

**ナビゲーションメニュー**
メニュー項目のアイコンとテキストを切り替えるエフェクトに使えます。

**ボタンのラベル**
「詳細を見る」→「View Details」のような多言語対応に活用できます。

まとめ

CSS 3D Transformを使うことで、テキストがX軸方向に回転して切り替わる印象的なホバーエフェクトを作成できます。

ポイントは、transform-originとbackface-visibilityの適切な設定です。JavaScriptなしでCSSだけで実現できるため、軽量でパフォーマンスにも優れています。

言語切り替えやインタラクティブなUIに、ぜひ取り入れてみてください。