เสร็จแล้ว

✨ Trda sql

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:3em;
      }
      .cover{
        width:300px;
        margin:auto;
        font-size: 0;
        transform-style: preserve-3d;
        transform: rotate(25deg) rotatex(30deg) rotatey(-42deg);
        transition: .3s;
        cursor: pointer;
        position:relative;
      }
      .cover img{
        width:100%;
      }
      .cover:active{
        transform: rotate(10deg) rotateY(30deg) rotateX(0deg);
        animation: showup 5s infinite alternate;
      }
      .paper-1 {
        background: linear-gradient(to right,#eee,#ddd);
        right: -20px;
        top: 0;
        width: 20px;
        height: 100%;
        transform-origin: left;
        transform: rotatey(90deg);
        border-right: 1px solid #999;
      }
      .paper-2 {
        background: linear-gradient(to right,#eee,#ddd);
        left: 0;
        bottom: -20px;
        width: 100%;
        height: 20px;
        transform-origin: top;
        transform: rotatex(-90deg);
        border-bottom: 1px solid #999;
      }
      .paper-3 {
        background: hsl(42, 66%, 59%);
        left: -20px;
        top: 0;
        width: 20px;
        height: 100%;
        transform-origin: right;
        transform: rotatey(-90deg);
        border-right: 1px solid #999;
      }
      .paper-4 {
        background: linear-gradient(to right,#eee,#ddd);
        left: 0;
        bottom: 392.844px;
        width: 100%;
        height: 20px;
        transform-origin: bottom;
        transform: rotatex(90deg);
        border-bottom: 1px solid #999;
      }
      .paper-5{
        background: hsl(42, 66%, 59%);
        width: 100%;
        height: 100%;
        top: 0;
        transform: translateZ(-20px);
        border-right: 1px solid #999;}
      .paper {
        position: absolute;
        box-sizing: border-box;
        z-index: 50;
      }
      @keyframes showup {
    25% { transform: rotate(70deg) rotateY(50deg) rotateX(-80deg); }
    50% { transform: rotate(20deg) rotateY(-80deg) rotateX(100deg); }
    75% { transform: rotate(-40deg) rotateY(20deg) rotateX(60deg); }
    100% { transform: rotate(30deg) rotateY(-30deg) rotateX(-10deg); }
  }
    </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 class="paper paper-4">
      </div>
      <div class="paper paper-5">
      </div>
    </div>
  </body>
</html>