見出し画像

ポートフォリオ備忘録 -テキストの回転-

K

三次元的に奥に回転するテキスト

目的

トップビューのテキストの表示に遊び心を持たせてみたい。

実際のコード/html

<section class="area_top_view">
        <div class="container">
          <!-- <p class="top_ttl">Ida Takuma</p> -->
          <!-- <p class="sub_ttl">It is just a portfolio.</p> -->
          <a href="">
            <span class="top_ttl">It is just a portfolio.</span>
            <span class="sub_ttl">Ida Takuma / Yuki / K</span>
          </a>
        </div>
      </section>

実際のコード/css

.area_top_view a {
  width: 400px;
  height: 56px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.area_top_view a span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s;
  transform-origin: 0 50% -1.5rem;
}
.area_top_view a .sub_ttl {
  transform: rotateX(-90deg);
}
.area_top_view a:hover .sub_ttl {
  transform: rotateX(0deg);
}
.area_top_view a:hover .top_ttl {
  transform: rotateX(90deg);
}
.area_top_view .top_ttl {
  color: white;
  font-family: "Bona Nova";
  font-size: 40px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.area_top_view .sub_ttl {
  color: white;
  font-family: "Bona Nova";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

テキストの回転に関する解説

  1. 回転の基礎設定:

    • transform-style: preserve-3d;を使用して3D変換のスタイルを保持。

  2. 回転の基準点:

    • transform-origin: 0 50% -1.5rem;で変換の基準点を設定。

      • 0: X軸の起点を左端に設定。

      • 50%: Y軸の起点を中央に設定。

      • -1.5rem: Z軸の位置を設定し、奥行きを与える。

  3. 初期状態の回転:

    • .area_top_view a .sub_ttl { transform: rotateX(-90deg); }

      • rotateX(-90deg);: X軸を基準に-90度回転して、要素を垂直に折りたたむ（隠す）。

  4. ホバー時の回転（sub_ttlの表示）:

    • .area_top_view a:hover .sub_ttl { transform: rotateX(0deg); }

      • rotateX(0deg);: X軸の回転を0度に設定して、元の位置に戻し、要素を表示する。

  5. ホバー時の回転（top_ttlの非表示）:

    • .area_top_view a:hover .top_ttl { transform: rotateX(90deg); }

      • rotateX(90deg);: X軸を基準に90度回転して、要素を垂直に折りたたむ（隠す）。

  6. アニメーションのトランジション:

    • transition: transform .4s;で変換に0.4秒のトランジションを設定。

      • アニメーションの滑らかさを確保し、回転の変換がスムーズに行われるようにする。

わかりにくいけど静止画


実際に動いてる動画

この記事が気に入ったらサポートをしてみませんか？