パーツ番号 02-12-01 ・ CSSのみ

横書き⇔縦書きモーフ見出し

ホバーすると横書きの英文が回転しながら消え、入れ替わりで縦書きの和文が現れます。和洋を切り替えたいお知らせ欄やキャンペーン見出しに。

hovercss3d

プレビュー

ソースコード

HTML

<div class="d02-12-01-wrap">
          <span class="d02-12-01-h">SPECIAL NOTICE</span>
          <span class="d02-12-01-v">特別のお知らせ</span>
        </div>

CSS

.prev.d02-12-01{ background:#faf7f2; }
        .d02-12-01 .d02-12-01-wrap{
          position:relative;
          width:100%;
          height:180px;
          display:flex;
          align-items:center;
          justify-content:center;
          cursor:pointer;
        }
        .d02-12-01 .d02-12-01-h,
        .d02-12-01 .d02-12-01-v{
          position:absolute;
          top:50%; left:50%;
          white-space:nowrap;
          transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-01 .d02-12-01-h{
          font-size:19px;
          font-weight:700;
          letter-spacing:.1em;
          color:#3b3226;
          transform:translate(-50%,-50%) rotate(0deg);
          opacity:1;
        }
        .d02-12-01 .d02-12-01-v{
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:20px;
          font-weight:700;
          letter-spacing:.32em;
          color:#a8763e;
          transform:translate(-50%,-50%) rotate(90deg) scale(.8);
          opacity:0;
        }
        .d02-12-01 .d02-12-01-wrap:hover .d02-12-01-h{
          opacity:0;
          transform:translate(-50%,-50%) rotate(-90deg) scale(.8);
        }
        .d02-12-01 .d02-12-01-wrap:hover .d02-12-01-v{
          opacity:1;
          transform:translate(-50%,-50%) rotate(0deg) scale(1);
        }

クラス名 .d02-12-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。