Box (ยัง บ่ เสร็จ)

✨ NATTAPONG WAIJAREE

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:3em;
      }
      .cover{
        width:300px;
        margin:auto;
        font-size: 0;
/*         transform-style:; */
/*         transform:; */
        transition: .3s;
        cursor: pointer;
        position:relative;
        transform:skewX(-10deg);
        transform-style: preserve-3d;
        animation: x  4s infinite;
        z-index:1;
      }
      .cover img{
        width:100%;
      }
      .paper-1 {
        background: linear-gradient(to right,#eee,#ddd);
        right: -20px;
        top: -2;
        width: 20px;
        height: 100%;
/*         transform-origin:; */
/*         transform:; */
        border-right: 1px solid #999;
        transform:skewY(50deg);
        transform-origin: left;
      }
      .paper-2 {
        background: linear-gradient(to bottom,#eee,#ddd);
        left:-3;
        bottom: -20px;
        width: 100%;
        height: 20px;
/*         transform-origin:; */
/*         transform:; */
        border-bottom: 1px solid #999;
        transform:skewX(50deg);
        transform-origin: top;
        z-index:1;
        position:absolute;
      }
      .paper-3 {
        background: linear-gradient(to right,yellow,yellow);
        right: 280px;
        top: -.1;
        width: 20px;
        height: 100%;
/*         transform-origin:; */
/*         transform:; */
        border-right: 1px solid #999;
        transform:skewY(50deg);
        transform-origin: left;
        position:absolute;
        z-index: 0;
      }
      .paper {
        position: absolute;
        box-sizing: border-box;
        z-index: 50;
        
      }
      .cover:hover{
      50%{transform: translateY(-50px);}
      }
      
      @keyframes x{
		25% {
    transform: translateX(50px);
    transform-style: preserve-3d;
  }
  50% {
    transform: translatey(80px) rotatey(-360deg);
    transform-style: preserve-3d;
  }
  		}
    </style>
  </head>
  <body>
    <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>
  </body>
</html>