Showcase 2 -2 (Copy 11983)

✨ Apichet Komwatcharapong

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
        /*         perspective:100vw; */
      }
      .main{
        transform-style:preserve-3d;
        width:300px;
        height:300px;
        margin:auto;
        transform:translatey(300px) scale(.8);
/*         animation:main 2s infinite linear alternate; */
      }
      .all_plate{
        width:300px;
        height:300px;
        position:relative;
        transform-style:preserve-3d;
        transform:rotateX(60deg);
        /*         background:red; */
        animation:base 5s infinite linear;
      }
      .plate{
        transform-style:preserve-3d;
        transform-origin:center bottom;
        background-size:cover;
        background-position:center;
        width:300px;
        height:300px;
        box-shadow:0px -100px 200px #0006 inset;
        position:absolute;
        left:0;
        top:0;
        /*         opacity:.5; */
      }
      .p1{
        background-image:url('https://source.unsplash.com/1200x600/?flower');
        transform:rotateX(-90deg);
      }
      .p2{
        background-image:url('https://source.unsplash.com/1200x600/?sea');
        transform:rotateX(-90deg) rotatey(90deg);
        transform-origin:left bottom;
      }
      .p3{
        background-image:url('https://source.unsplash.com/1200x600/?wood');
        transform:rotateX(-90deg) rotatey(-90deg);
        transform-origin:right bottom;
      }
      .p4{
        background-image:url('https://source.unsplash.com/1200x600/?sky');
        transform:rotateX(-90deg) rotatey(0deg) translateZ(-300px);
        transform-origin:center bottom;
        opacity:1;
      }
      @keyframes base{
        from{
          transform:rotateX(60deg) rotateZ(0deg)}
        to{
          transform:rotateX(60deg) rotateZ(360deg)}
      }
      @keyframes main{
        from{
          transform:translatey(300px) scale(.5);
        }
        to{
          transform:translatey(300px) scale(1.3);
        }
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="all_plate">
        <div class="plate p1">
        </div>
        <div class="plate p2">
        </div>
        <div class="plate p3">
        </div>
        <div class="plate p4">
        </div>
      </div>
    </div>
  </body>
</html>