CSS animation で遊び倒す　- 本 -

CSS animation day12 となりました。

もはや自然ネタは枯渇してしまったので、本日は、興味深い動きの本の CSS アニメーションをしたいと思います。


#1. 完成版

![ezgif.com-optimize (10).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/dad98dab-9c2c-c2eb-98ba-cb0e423abeaf.gif)

<p class="codepen" data-height="689" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="yZMKmM" style="height: 689px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="book.animation">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/yZMKmM/">
  book.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. なぜか？

医学書とかをパッと開く感じでSPAにアニメーションを入れられたら、かっこいいな！動機はそれだけです・・・はい。

#3. 参考文献
[Pure CSS 3D Animated Flip Book or Card Design - 3D Perspective flip effect on Hover using CSS](https://www.youtube.com/watch?v=R6IJSNzivGY)
[3D Flip Hover Effects - CSS3 Hover Effects - Pure Html CSS 3D Flipping Image - Html5 CSS3 Tutorial](https://www.youtube.com/watch?v=zBR9qBBM9KA)
https://codepen.io/_fbrz/pen/whxbF?editors=110

#4. 分解してみる

❶. 

まずは、長方形を作ります。

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


```styles.css
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 250px;
  height: 350px;
  background: #2e517d;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}
```

<img width="716" alt="スクリーンショット 2019-02-01 13.43.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/2ac9d4a8-343f-1eee-f6c6-f02fca349448.png">


❷. 

どうすれば、本のページをめくる動きをつけられるでしょうか？

・・・

1. cover class に別のちょっと狭い長方形を作り、
2. 左端から20px くらいのところを起点に
3. hover時に、左にぺろっと、めくれる動きをつければ良さそうです。 (rotate Y)


では、やってみましょう。

```styles.css
.container {
  width: 250px;
  height: 350px;
  background: #2e517d;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  perspective: 1000px;
}

.cover {
  width: 210px;
  height: 100%;
  position: absolute;
  left: 40px;
  background-color: #345b8c;
  transform: rotateY(-10deg);
  transform-style: preserve-3d;
  transform-origin: left;
  transition: all 0.5s ease-in;
}

.container:hover .cover {
  transform: rotateY(-180deg);
}
```
![ダウンロード (26).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3ffd2dde-c411-d5f3-345d-bcfe71d39d0b.gif)


ポイントは3つ

 `・perspective,  transform-style`
[perspective](https://developer.mozilla.org/ja/docs/Web/CSS/perspective) プロパティは、要素に __遠近感__ をつけることができます。z = 0平面と、ユーザー間の距離を設定することができます。

[transform-style](https://web-designer.cman.jp/css_ref/abc_list/transform-style/) は、transformで変形した __要素の重なり__を、2Dか3Dで表現できます。 preserve-3d で、デモのように3D表示できます。

 `・transform-origin`
要素の変形における、__原点__ を設定できます。
rotate() と合わせることで、回転の中心を設定できます。


__ex:__  transform-origin: top left 
![ダウンロード (25).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/ea87ffa2-8c7a-e447-ddfd-8543d724932c.gif)


 `・transition　プロパティ`
:hover や :active やJavascript でアニメーションを設定したいときに使うプロパティです。詳細は[こちら](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75) をご参照ください。 
本を開く動きは、はじめゆっくりあと素早くが、表現として合っていると思いますね。そんな時は、ease-in です！


❸.
本の表紙に画像を載せましょう！　
[Canva](https://www.canva.com/ja_jp/templates/book-covers/) を使って、簡単に画像を作れます。

<img width="1132" alt="スクリーンショット 2019-02-01 16.48.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/2613b295-046d-b9c9-60db-0bf848fd5381.png">

ダウンロードして、取り入れましょう。その際に、画像が重い方は、[TinyPNG](https://tinypng.com/) で、画像を圧縮しましょう。　


```styles.css
.cover {
  width: 210px;
  height: 100%;
  position: absolute;
  left: 40px;
  background: url("../img/bookcover.png");
  background-size: cover;
  transform: rotate(0deg);
  transform-style: preserve-3d;
  transform-origin: left;
  transition: all 1s ease-in;
}
```

![ダウンロード (27).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/6b124753-bd20-3fe9-44d0-bf06d3bb1302.gif)

❹.
では、１ページ目の画像を同様にCanva で作り、取りこみます。
![ダウンロード (28).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/8ca6e923-c34a-d033-ae32-2bb1b21af764.gif)

```stles.css
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 210px;
  height: 350px;
  background: url("../img/page.png");
  background-size: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  perspective: 1000px;
}

/*left:40pxを削除してます。*/
.cover {
  width: 210px;
  height: 100%;
  position: absolute;
  background: url("../img/bookcover.png");
  background-size: cover;
  transform: rotate(0deg);
  transform-style: preserve-3d;
  transform-origin: left;
  transition: all 1s ease-in;
  border-radius: 1%;
}

.container:hover .cover {
  transform: rotateY(-180deg);
}
```

![ダウンロード (28).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/6e7c84a8-1024-82e7-fbf9-b70b88b9be82.gif)

❺. 
表紙の背面が透けているので、変更し、影をつけましょう。　

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

```styles.css
.container {
  width: 210px;
  height: 350px;
  background: url("../img/page.png");
  background-size: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  perspective: 1000px;
  box-shadow: inset 210px 0 50px rgba(0, 0, 0, 0.5);
}

figure {
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
}

figure.back {
  background: #f3f3f3;
  transform: rotateY(-180deg) translateX(40px) translateY(-16px)
    translateZ(0.1px);
}
```
![ezgif.com-optimize (9).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2d8c3c08-ad24-d539-f734-45f68ba65b75.gif)



ポイントは

`box-shadow`
影は、表紙によって作られ、1枚目の上の内側にできるので、[inset](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) キーワードで、影を内側につけます。また、box-shadowの最初の2つの値は、X軸とY軸の影の長さですが、3つめの値でぼかしの程度をつけます。
 
`backfave-visibility` 
[backfave-visibility](https://developer.mozilla.org/ja/docs/Web/CSS/backface-visibility) は、要素が裏を向いたときに、見えなくするプロパティです。


❻. 
影を動かします。

```styles.css
.container {
  width: 210px;
  height: 350px;
  background: url("../img/page.png");
  background-size: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
  perspective: 1000px;
  box-shadow: inset 210px 0 50px rgba(0, 0, 0, 0.5),
                      0 2px 50px rgba(0, 0, 0, 0.5);
  transition: 1s ease-in;
}

.container:hover {
  box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5),
                     0 2px 50px rgba(0, 0, 0, 0.5);
}
```
![ezgif.com-optimize (10).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/d2deb1a2-842c-3c84-d62a-6b7e4575cc85.gif)



完成しました！
長かった・・・

ではまた明日〜