【CSS】transformのtranslateとrotateとskewを使って、立体的な本を表現する方法。

CSSのtranslateとrotateとskewを使えば、以下のように本を立体的に表現できます。

 <div class="wrapper">
    <div class="center">
        <div class="page"></div>
    </div>
  </div>

 .wrapper{
      height: 500px;
      position: relative;
      background: #99cccc;
      margin: 100px 0;
  }
  .center{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  } 
  .page{                                                  
      width: 280px;
      height: 349px;
      transform: rotate(-45deg) skewX(10deg) scale(.8);
      border-left: solid 3px rgb(4, 104, 74);
      background: url(画像の場所を指定) no-repeat;
      background-size: contain;
      box-shadow: -70px 50px 50px rgba(0, 0, 0, 0.5);
      transition: .3s ease-in;
  }
  .page::before{ 
      content: '';
      width: 50px;
      background: #012410be;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      transform: skewY(-45deg) translate(-53px, -29px);
      transition: .3s ease-in;
  }
  .page::after{
      content: '';
      width: 100%;
      background: #ccc;
      position: absolute;
      bottom: 0px;
      left: 0px;
      height: 50px;
      transform: skewX(-45deg) translate(21px, 51px);
      transition: .3s ease-in;
  }

マウスオーバーでアニメーションを加える

  .page:hover{
    transform: skewX(10deg) 
                translate(20px, -50px);
  }

 .page1:hover{
      transform: none;
  }
  .page1:hover.page1::after,
  .page1:hover.page1::before{
      opacity: 0;
  }

 .page2:hover{
      transform: rotate(-45deg) skewX(10deg)
                translate(50px, -45px) scale(0.8)
  }

まとめ

一つの要素（div）と疑似要素のbefore,afterを、本の三面とする。

translateとrotateとskewで立体的に表現する

　

マウスオーバーでアニメーションさせる