1. 完成版

See the Pen StarWars by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

sitepoint

3. 分解してみる

❶.
背景に以前作成した、Starを使います。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>

    <div class="titles">
      <div id="titlecontent">
        <p>Long time ago...
        </p>
      </div>
    </div>
  </body>
</html>

styles.css

body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
}

# content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;

}

# stars {
  width: 1px;
  height: 1px;
  background: transparent;
  transform: perspective(100px) rotateX(10deg);
  animation: star 50s linear infinite;
  box-shadow: 779px 1331px #fff, 324px 42px #fff, 303px 586px #fff,
    1312px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 1087px 1871px #fff,
    36px 1546px #fff, 132px 934px #fff, 1698px 901px #fff, 1418px 664px #fff,
    1448px 1157px #fff,

                         ... 


@keyframes star {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

いい感じです。

❷.
では、テキストを傾けて奥に向かわせるにはどうしたら良いでしょうか？

結論から言うと、rotateX するとできそうです。
スターでやってみましょう。

styles.css

body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
  transform: perspective(300px) rotateX(60deg) ;
}
# star{
  ...
}

画面全体をrotateX することで、奥に向かうようになりました。
では、これを、text に応用しましょう。

styles.css

# content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(300px) rotateX(30deg);
  font-size: 40px;
}

大分いい感じになってきましたね。

❸.
では、最後に、このtext にアニメーションをつけましょう。

styles.css

# content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  animation: text linear 15s infinite;
}


@keyframes text {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}

rotateX はこういう奥ゆきを出したい時に使うんですね。　
非常に勉強になります。
それでは、また明日〜