Box (Branch 3972)

✨ นายไกรวิน แนวอินทร์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        transform-style: preserve-3d;
        margin:3em;
        
      }
      .canvas{
        animation: up 1s infinite alternate;
      }
      .cover{
        width:300px;
        margin:auto;
        font-size: 0;
        transform-style: preserve-3d;
        transform: rotateX(60deg) rotateY(-25deg) rotateZ(50deg);
        transition: 1s;
        cursor: pointer;
        position:relative;
      }
      .cover img{
        width:100%;
      }
      .cover:hover{
        transform: rotateX(30deg) rotateY(30deg) rotateZ(0deg);
      }
      @keyframes up{
        from {transform:translateX(0px)rotate(0deg);}
        to {transform: translatex(-50px) rotate(10deg);}
      }
      .paper-1 {
        background: linear-gradient(to right,#fff,#ddd);
        right:0;
        top: 0;
        width: 20px;
        height: 100%;
        transform:rotatey(-90deg);
      }
      .paper-2 {
        background: linear-gradient(to bottom,#eee,#ddd);
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        transform:rotateX(90deg);

}
      .paper-3 {
		  background: hsl(40, 50%, 50%);
        left: -20;
        top: 0;
        width: 20px;
        height: 100%;
        transform:rotatey(-90deg);
      }
      .paper-4 {
		  background: linear-gradient(to bottom,#fff,#ddd);;
        left: 0;
        top: -20;
        width: 100%;
        height: 20px;
        transform:rotateX(90deg);
      }
      .back{
		  background: hsl(40, 50%, 50%);
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform:translateZ(-20px);
      }
      .paper {
        position: absolute;
        transform-origin: bottom right;
        transform-style:preserve-3d;
        box-sizing: border-box;
        z-index: 50;
        border-right: 1px solid #999;
        border-left: 1px solid #999;
      }
      .Astop{
			animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="canvas">
      <div class="cover">
        <img src="https://content.shopback.com/th/wp-content/uploads/2019/05/01185252/pic9_phralan.in_.th_.jpg">
        <div class="paper paper-1">
        </div>
        <div class="paper paper-2">
        </div>
        <div class="paper paper-3">
        </div>
        <div class="paper paper-4">
        </div>
        <div class="paper back">
        </div>
      </div>
    </div>
    <script>
      let book = document.querySelector(".cover");
      book.onmouseover = function(){document.querySelector(".canvas").classList.add("Astop")};
      book.onmouseout = function(){document.querySelector(".canvas").classList.remove("Astop")};
    </script>
  </body>
</html>