テキストを上に回転させるホバーエフェクトの実装方法

CSSでテキストをホバーした際に、スムーズに上へ回転するアニメーションを実装しました。このアニメーションを使うと、見た目に動きを加え、ユーザーの注目を引くことができます。

ホバーしてね↓

1. HTMLコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.wrapper {
  width: 12em;
  height: 6em;
  position: relative;
}
.wrapper span {
  display: grid;
  place-items: center;
  position: absolute;
  font-size: 3rem;
  inset: 0;
  transform-style: preserve-3d;
  transition: rotate .4s;
  transform-origin: 0 50% -1.8rem;
  color: gray;
  cursor: pointer;
  user-select: none;
}
.wrapper .jp {
  rotate: x -90deg;
}
.wrapper:hover .jp {
 rotate: x 0deg;
}
.wrapper:hover .eng {
 rotate: x 90deg;
}
</style>
<div class="container">
  <div class="wrapper">
    <span class="eng">delcano</span>
    <span class="jp">デルカノ</span>
  </div>
</div>

2. 各プロパティの解説

• .container:
  Flexboxで要素を中央に揃えます。justify-contentで水平方向の位置を調整し、align-itemsで垂直方向の位置を調整しています。
• .wrapper:
  親要素としてテキストを囲むブロック要素です。position: relative;で、子要素を絶対位置に配置できるように設定しています。
• .wrapper span:
  回転するテキスト部分です。position: absolute;で要素を重ね合わせ、transform-style: preserve-3d;で3D効果を有効にしています。transitionでアニメーションのスムーズな動きを設定し、transform-originで回転の中心を指定しています。
• .wrapper .jp:
  日本語のテキストが初期状態では90度回転して非表示になります。
• ホバーエフェクト:
  ホバー時に、日本語テキスト（.jp）が回転して正面に表示され、同時に英語テキスト（.eng）が回転して消えます。rotateを使用して、X軸周りに回転させています。

3. 効果的な使用方法

このような回転アニメーションは、言語の切り替えやインタラクティブなUIに最適です。ユーザーのマウスホバーに反応するデザインを追加することで、より動的なウェブサイトを作成できます。

4. まとめ

このタイピング風のホバーアニメーションは、CSSだけで簡単に実装でき、JavaScriptを使わずに軽量なアニメーションを提供できます。ウェブサイトのデザインに動きとインタラクティブ性を加える効果的な方法です。