今回はCSSだけでドアが開くように文字が浮かび上がるホバーエフェクトを作成しました。

簡単に取り入れることができ、Webフォントを変更することで様々なフォントに適用させることが可能です。

開いたドアからドラ〇モンが出てくるエフェクトも付けられたら楽しいだろうな・・・
と思いながら、それはまた次回に笑

デモページは、こちら

↓以下が実際のソースサンプルです。

▼HTML

  <div class="foo">
    <span class="letter" data-letter="A">A</span>
    <span class="letter" data-letter="B">B</span>
    <span class="letter" data-letter="C">C</span>
    <span class="letter" data-letter="D">D</span>
    <span class="letter" data-letter="E">E</span>
    <span class="letter" data-letter="F">F</span>
    <span class="letter" data-letter="G">G</span>
    <span class="letter" data-letter="H">H</span>
    <span class="letter" data-letter="I">I</span>
    <span class="letter" data-letter="L">L</span>
    <span class="letter" data-letter="M">M</span>
    <span class="letter" data-letter="N">N</span>
    <span class="letter" data-letter="O">O</span>
    <span class="letter" data-letter="P">P</span>
    <span class="letter" data-letter="Q">Q</span>
    <span class="letter" data-letter="R">R</span>
    <span class="letter" data-letter="S">S</span>
    <span class="letter" data-letter="T">T</span>
    <span class="letter" data-letter="U">U</span>
    <span class="letter" data-letter="V">V</span>
    <span class="letter" data-letter="Z">Z</span>
  </div>

▼CSS

    *, *:before, *:after{
      box-sizing:border-box;
    }
    body{
      font-family: 'Lato', sans-serif;
    }
    div.foo{
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }
    .letter{
      display: inline-block;
      font-weight: 900;
      font-size: 8em;
      margin: 0.2em;
      position: relative;
      color: #00B4F1;
      transform-style: preserve-3d;
      perspective: 400;
      z-index: 1;
    }
    .letter:before, .letter:after{
      position:absolute;
      content: attr(data-letter);
      transform-origin: top left;
      top:0;
      left:0;
    }
    .letter, .letter:before, .letter:after{
      transition: all 0.3s ease-in-out;
    }
    .letter:before{
      color: #fff;
      text-shadow: 
        -1px 0px 1px rgba(255,255,255,.8),
        1px 0px 1px rgba(0,0,0,.8);
      z-index: 3;
      transform:
        rotateX(0deg)
        rotateY(-15deg)
        rotateZ(0deg);
    }
    .letter:after{
      color: rgba(0,0,0,.11);
      z-index:2;
      transform:
        scale(1.08,1)
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        skew(0deg,1deg);
    }
    .letter:hover:before{
      color: #fafafa;
      transform:
        rotateX(0deg)
        rotateY(-40deg)
        rotateZ(0deg);
    }
    .letter:hover:after{
      transform:
        scale(1.08,1)
        rotateX(0deg)
        rotateY(40deg)
        rotateZ(0deg)
        skew(0deg,22deg);
    }

今回の記事作成にあたり、
『文字が浮き上がるOpening type』さんの記事を参考にさせていただきました。
ありがとうございます。