CSS3：perspectiveを使って某映画風テキストスクロール

サンプルはこちら。

See the Pen nFHzi by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

CSS3の「perspective」プロパティと「transform」による変形で表現しています。
※再生が止まる場合は上記画面内右下の「RERUN」を押してください。

HTML

<div class="pers">
  <div class="box">
    <div class="text">
      文章
    </div>
    <div class="mask"></div>
  </div>
</div>

まずperspectiveと幅を指定するためだけの箱「pers」を大外に置きます。
次に傾きを設定するための「box」を置き、さらにその中にテキストを収めるための「text」を置いています。

文章にただパース（奥行き）を付けたいだけなら「text」は不要で、boxの中に文章を入れてしまえば良いのですが、今回はスクロールをさせたいため、「pers」でパースを取り、「box」で傾きを付け、その範囲内で「text」をスクロールさせるという組み方をしています。

「mask」に関しては、textの上にかぶさる黒いグラデーションを表現して文字が消えていくように見せています。

CSS(Sass)

要点部分を抜粋して紹介します。

.pers {
  width: 400px;
  margin: 0 auto;
  @include perspective(200px);
}
.box {
  height: 300px;
  overflow: hidden;
  @include transform(rotateX(30deg));
}
.text {
  height: 300px;
  @include animation(scroll 60s 1 linear);
}
@keyframes scroll {
  0% {@include transform(translateY(300px))}
  100% {@include transform(translateY(-3000px))}
}

.pers に「perspective」プロパティを200pxで設定しています。
これはZ軸方面に200pxの奥行きを持たせる指定ですが、本来2次元のPCモニタ上でZ軸を指定しても、これだけでは何も変わりません。

次に .box で「rotateX」を30度で指定しています。
X軸中心で30度傾かせることで、.persに指定していた奥行きに応じて立体的に傾くような表現になります。

そして.textに対して、「scroll」のアニメーションを1分かけて1回再生するように設定しています。
scrollは「translateY」を使い、Y軸方向に移動することでスクロールしているように見せています。