CSS animation で遊び倒す - StarWars - 

CSS animation day19 となりました。

本日は、CSS animation でスターウォーズを作ります。



#1. 完成版

![ezgif.com-optimize (14).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/cf45dda3-035d-eafc-f5f2-4624979800d7.gif)

<p class="codepen" data-height="499" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="omEyYw" style="height: 499px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="StarWars">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/omEyYw/">
  StarWars</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. 参考文献
[sitepoint](https://www.sitepoint.com/css3-starwars-scrolling-text/)

#3. 分解してみる

❶. 
背景に以前作成した、[Star](https://qiita.com/duka/items/7ffce0eb6085fad08404)を使います。

```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);
  }
}
```

<img width="1207" alt="スクリーンショット 2019-02-09 14.53.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/331a9f8a-3aef-e8a3-86ec-b6039f8f71c7.png">


いい感じです。

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

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

```styles.css
body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
  transform: perspective(300px) rotateX(60deg) ;
}
#star{
  ...
}
```
![ダウンロード (45).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/b185a5e4-d4d5-b99c-fdcf-c7defd258701.gif)


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

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

<img width="1217" alt="スクリーンショット 2019-02-09 15.01.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/c4ddbaf7-d94b-bd0e-a270-7a6fe3250193.png">

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


❸.
では、最後に、この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);
  }
}
```

![ezgif.com-optimize (14).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/8f4cb7d9-e0b5-46ef-c1ed-1618d22ba364.gif)


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