CSS animation で遊び倒す - Skew 3D animation -

CSS animation day27 となりました。
本日は、今まで使ってこなかった、最後のtransform プロパティである、skew を使った立体的なアニメーションをします。



#1. 完成版
![ダウンロード (12).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/dfa6eb37-0612-17c2-219d-74cdcc883b6c.gif)


<p class="codepen" data-height="504" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="ErOrGE" style="height: 504px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Twitter Skew 3D Animation">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/ErOrGE/">
  Twitter Skew 3D Animation</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. 参考文献
[Navigation Bar](https://codepen.io/katydecorah/pen/HEgwl)
[3D - CSS Social Tiles](https://codepen.io/Stockin/pen/mzydLz)
[CSS 3d Layered Image Hover Effects - CSS Isometric Design](https://www.youtube.com/watch?v=WF68FcI21es)
#3. 分解してみる

❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="twitter"></div>
  </body>
</html>
```

```styles.scss
body {
  margin: 0px;
  padding: 0px;
  background: #ccc;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transform: rotate(30deg) skew(-25deg);
}
```

<img width="669" alt="スクリーンショット 2019-02-17 8.42.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/9f57ac3a-92fb-96f8-8c53-0bb62b65fb33.png">


skewで長方形を平行四辺形に曲げ、それをrotateすることで、このような形になっております。

では、この形に擬似要素 :before, ;after をつけて、直方体にしましょう。

```styles.scss
.twitter:before {
  content: "";
  position: absolute;
  top: 130px;
  left: 15px;
  width: 100%;
  height: 30px;
  background: #a5a5a5;
  transform: skewX(45deg);
}
```
<img width="641" alt="スクリーンショット 2019-02-17 9.35.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/19191faa-e696-648c-af51-47cebe314693.png">



beforeに、skewX45度して、四角形を垂直に起きました。
(なお、この値は、自分で直接動かして、微調整するしかなさそうです。)

同様に、after要素もつけましょう。

```styles.scss
.twitter:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 340px;
  width: 30px;
  height: 100%;
  background: #a5a5a5;
  transform: skewY(45deg);
}
```
<img width="658" alt="スクリーンショット 2019-02-17 9.36.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/0c573194-7acd-f7b5-6444-1a38cbc53be6.png">


before, after は、このように、HTML を汚すことなく、画像を追加して表現を加えることができるので、便利ですね。position:absoluteをつけるのを、忘れないようにしましょう。


❷.
icon をのせます。
[以前の記事](https://qiita.com/duka/items/c3bd66c8741ec826cd0e) の通り、FontAwsomeを導入し、twitter アイコンを探しましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />

//ここから

    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />

//ここまでを追加する


  </head>
  <body>
   <div class="twitter">
      <i class="fab fa-twitter"></i>
    </div>
  </body>
</html>
```

<img width="578" alt="スクリーンショット 2019-02-17 10.19.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/91a9ceda-6d87-061c-7bfb-034ab2498022.png">

フォントの大きさと、位置を設定し、テキストを追加します。
また、before, after で付け加えた四角形の色を、hsl に変更し、輝度を変えて表現します。hslについてわからない方は、[こちら](https://qiita.com/anchoor/items/5edd2a67340770a8ca44) をご参照ください。

```index.html
 <body>
    <div class="twitter">
      <i class="fab fa-twitter font">
        <span>Twitter</span>
      </i>
    </div>
  </body>
```

```styles.scss

.twitter:before {
  content: "";
  position: absolute;
  top: 130px;
  left: 15px;
  width: 100%;
  height: 30px;
  background: hsl(0, 0%, 50%);
  transform: skewX(45deg);
}

.twitter:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 340px;
  width: 30px;
  height: 100%;
  background: hsl(0, 0%, 34%);
  transform: skewY(45deg);
}

.font {
  font-size: 50px;
  color: #1ca1f1;
  padding: 40px 30px;
}

span {
  text-align: center;
  font-size: 45px;
  font-family: Century, sans-serif;
  margin-left: 6px;
}
```

<img width="729" alt="スクリーンショット 2019-02-17 11.00.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/db1b1fd7-511b-32f6-bda4-739ef95fa5be.png">


いい感じです！

❸.
では、hover すると、上に浮かび上がるアニメーションをつくりましょう。

```styles.scss

.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transform: rotate(30deg) skew(-25deg);

  &:hover {
    transform: translateY(-60px) rotate(30deg) skew(-25deg);
    transition-duration: 0.5s;
    transition-timing-function: ease;
    background: #1ca1f1;

    span {
      color: #fff;
      font-weight: bold;
    }
    .font {
      color: #fff;
    }
  }
}
```
![ダウンロード (7).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/34881e0b-c360-57ee-f407-f889b0af051a.gif)


注意点として、hover 後のtransform の値にも、 transform: rotate(30deg) skew(-25deg)　をつけてください。

❹.
では、これから表現力を上げるために、以下の微調整をしましょう。
<br/>
1. .twitter{} のカラーにlinear gradient を設定する。
2. .twitter のbefore, after 要素に、color を設定する。
3. 影をつける。
4. hover を外した時に、ゆっくり戻る。

<br/>
まず1,2からやりましょう。

```styles.scss

.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transform: rotate(30deg) skew(-25deg);

  &:hover {
    transform: translateY(-60px) rotate(30deg) skew(-25deg);
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    background: linear-gradient(-45deg, #1ca1f1, skyblue);
    span {
      color: #fff;
      font-weight: bold;
    }
    .font {
      color: #fff;
    }

    &:before {
      background: hsl(250, 50%, 70%);
    }

    &:after {
      background: hsl(250, 20%, 51%);
    }
  }
}
```
![ダウンロード (8).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/ee34902b-4741-6e2d-1d89-a38a661f9309.gif)

なお、animation timing function も、ボタンが早く動いて、動きの余韻を持たせるために、ease-out に変更しました。

___
次に、影をつけていきましょう。
[こちら](https://ferret-plus.com/8961) の記事のように、box-shadowプロパティと、filter:drop-shadow の2つがあります。どちらでもいいですが、box-shadowをここでは、使います。

```styles.scss
.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transform: rotate(30deg) skew(-25deg);
  box-shadow: 30px 32px 10px rgba(0, 0, 0, 0.5);

  &:hover {
    transform: translateY(-60px) rotate(30deg) skew(-25deg);
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    background: linear-gradient(-45deg, #1ca1f1, skyblue);
    box-shadow: 120px 100px 60px rgba(0, 0, 0, 0.3);
    span {
      color: #fff;
      font-weight: bold;
    }
    .font {
      color: #fff;
    }

    &:before {
      background: hsl(250, 50%, 70%);
    }

    &:after {
      background: hsl(250, 20%, 51%);
    }
  }
}
```

![ダウンロード (9).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/e79dbc6f-2f6d-0798-bd42-0194984a3dbe.gif)

box-shadow　の3つめの設定値である、blur radius で、影にぼかしをつけています。光源は左上を意識してます。

___
最後に、ゆっくり戻るようにしましょう。
transition-duration をつけます。

```styles.scss
.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transform: rotate(30deg) skew(-25deg);
  transition-duration: 0.5s;
  box-shadow: 30px 32px 10px rgba(0, 0, 0, 0.5);
}
```

![ダウンロード (11).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/04f38be5-b0b3-be3d-dca2-699a4b2a48af.gif)

ご覧の通り、hoverが外れても、ゆっくり戻れるようになりましたが、最初のtranslate: rotate, skew のアニメーションが発動し、回転してしまいますね。

これを、どう治したら良いでしょうか？

結論から言うと、このtransoform: rotate, skew~ を.twitterの__親要素__につけて、transition-duration をそのまま.twitterに残せば大丈夫です。

```index.html
 <body>
    <div class="container">
      <div class="twitter">
        <i class="fab fa-twitter font">
          <span>Twitter</span>
        </i>
      </div>
    </div>
  </body>
```

```styles.scss

.container {
  transform: rotate(30deg) skew(-25deg);
}

.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transition-duration: 0.5s;
  box-shadow: 30px 32px 10px rgba(0, 0, 0, 0.5);

  &:hover {
    transform: translate(-55px, -60px);
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    background: linear-gradient(-45deg, #1ca1f1, skyblue);
    box-shadow: 120px 100px 60px rgba(0, 0, 0, 0.3);
            ・・・
　 }
}
```
![ダウンロード (12).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2a61484b-d706-c685-5702-679bddd37a70.gif)


できました！
なお、&:hover の、transformの動きも微調整してください。




また、初期位置を変更したりするだけで、こういう変化もできます。

```styles.scss
//translate3d(0,0,0) を追加

.twitter {
  position: relative;
  width: 340px;
  height: 130px;
  background: #fff;
  transform: translate3d(0, 0, 0) 　rotate(30deg) skew(-25deg);
  box-shadow: 30px 32px 10px rgba(0, 0, 0, 0.5);
}
```
![ダウンロード (10).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/acfcf576-c2f4-ac53-89f0-f3b1afee4bc8.gif)


色々な表現ができて、面白いですね。
それでは、また明日〜！