Showcase 2 -2 (Branch 11814) (Copy 11961)

✨ Apichet Komwatcharapong

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
       :root {
        --color-white: #fff;
        --color-darkest: #251600;
        --color-yellow: #f4c928;
        --color-yellow-dark: #523100;
      }
      
      body{
        background-image: url("https://s10.postimg.cc/jkg1hkkcp/mario_gif_by_ivanrussiansky_d9f6x59.gif");
        background-repeat: no-repeat;
        background-size: cover;
        font-family:sans-serif;
/*                 perspective:100vw; */
      }
      
      .container {
		  display: flex;
        justify-content: center;
        height: 100vh;
      }
      
      .main{
/*         margin:auto; */
/*         transform:translatey(300px); */
        animation:main 0.5s infinite linear alternate;
      }
      .all_plate{
        transform-style:preserve-3d;
        transform:rotateX(60deg);
/*                 background:red; */
        animation:base 10s infinite linear;
      }
      .plate{
        transform-origin:center bottom;
        background-size:cover;
        background-position:center;
        width:200px;
        height:200px;
        box-shadow:0px -100px 200px #0006 inset;
        position:absolute;
        left:0;
        top:0;
/*                 opacity:.5; */
      }
      .p1{
        background-image:url('https://i.pinimg.com/originals/cb/69/65/cb69655ec2bd92388a748c0c28190b49.jpg');
        transform:rotateX(-90deg);
/*         opacity:.5; */
      }
      .p2{
        background-image:url('https://i.pinimg.com/originals/cb/69/65/cb69655ec2bd92388a748c0c28190b49.jpg');
        transform:rotateX(-90deg) rotatey(-90deg) translatex(-200px);
        transform-origin:left bottom;
      }
      .p3{
        background-image:url('https://i.pinimg.com/originals/cb/69/65/cb69655ec2bd92388a748c0c28190b49.jpg');
        transform:rotateX(-90deg) rotatey(90deg) translatex(200px);
        transform-origin:right bottom;
      }
      .p4{
        background-image:url('https://i.pinimg.com/originals/cb/69/65/cb69655ec2bd92388a748c0c28190b49.jpg');
        transform:rotateX(-90deg) rotatey(180deg) translateZ(200px);
        transform-origin:center bottom;
        opacity:1;
      }
       .p5{
			background-image:url('https://i.pinimg.com/originals/cb/69/65/cb69655ec2bd92388a748c0c28190b49.jpg');
        transform:rotateX(0deg) rotatey(0deg) translatez(200px);
        transform-origin:center;
        opacity:1;
      }
      .p6{
			background-image:url('https://i.pinimg.com/originals/cb/69/65/cb69655ec2bd92388a748c0c28190b49.jpg');
        transform:rotateX(0deg) rotatey(0deg);
        transform-origin:center;
        opacity:1;
      }
      @keyframes base{
        from{
          transform:rotateX(60deg) rotateZ(0deg)}
        to{
          transform:rotateX(60deg) rotateZ(360deg)}
      }
      @keyframes main{
        from{
          transform:translatey(300px);
        }
        to{
          transform:translatey(280px);
        }
      }
     
/*       .coin {
        margin: 100px auto 0px auto;
        position: relative;
        height: 510px;
        width: 500px;
        border-radius: 42% 50% 50% 46%;
        transform: rotatey(30deg);
        background: linear-gradient(200deg, #e3b003, var(--color-yellow) 3%, var(--color-yellow) 20%, var(--color-yellow-dark) 38%, var(--color-darkest) 45%, var(--color-darkest) 60%, #987500 100%);
        animation: rota 5s linear infinite
      }
      .coin::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -31px;
        height: 510px;
        width: 470px;
        border-radius: 50%;
        background: linear-gradient(210deg, #fff, #fff 10%, #a47b00 35%, #875e00 38%, #875e00 50%, #523100 100%);
      }
      .coin::after {
        content: "";
        position: absolute;
        top: 7px;
        left: -29px;
        height: 496px;
        width: 455px;
        border-radius: 50%;
        background: linear-gradient(220deg, #ffec50, #f3c403 100%);
      }

.center {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 20px;
        height: 400px;
        width: 350px;
        border-radius: 50%;
        background: linear-gradient(230deg, #764600, #ecba00 70%, #fff 80%, #fff 100%);
      }
      .center::before {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 7px;
        right: 1px;
        height: 384px;
        width: 335px;
        border-radius: 50%;
        border-left: solid 5px #f9ca19;
        background: linear-gradient(230deg, #fff681, #ffda29 50%, #dca700 80%, #dca700 100%);
      }

.rectangle {
        position: absolute;
        left: 150px;
        top: 50%;
        transform: translatey(-50%) rotatey(40deg);
        z-index: 1;
        height: 290px;
        width: 100px;
        border-radius: 10px;
        border-left: 2px solid #d6ac00;
        border-top: 2px solid #d6ac00;
        box-shadow: 3px 0 0 #bc9b14;
        background: linear-gradient(220deg, #b68801, #b68801 3%, #d3a00b 13%, #d3a00b 10%, #fff 35%, #fff 36%, #f5c400 55%, #f3c300 85%, #fff 100%);
      }
      .rectangle::before {
        content: "";
        position: absolute;
        top: 10px;
        right: -13px;
        transform: rotatey(40deg);
        height: 270px;
        width: 110px;
        border-radius: 10px 10px 10px 10px;
        background: linear-gradient(to bottom, #4e3000, #8a5500 4px, #c09400 8px, #c09400 50%, #c09400 90%, #ffec65 100%);
      }
      .rectangle::after {
        content: "";
        position: absolute;
        top: 10px;
        right: -6px;
        transform: rotatey(40deg);
        height: 264px;
        width: 60px;
        border-radius: 1px 5px 0px 1px;
        background: linear-gradient(to bottom, #4e3000 0px, #ffec39 6px, #fedf21 99%, #ffea10 100%);
      }
      
      @keyframes rota {
        0% {transform: rotateY(0deg);}
        100% {transform: rotateY(360deg);}
      }  */
    </style>
  </head>
  <body>
    <div class="container">
      <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 class="plate p5">
          </div>
          <div class="plate p6">
          </div>
          
        </div>
      </div>
    </div>

  </body>
</html>