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

✨ Apichet Komwatcharapong

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background-image: url("https://s10.postimg.cc/jkg1hkkcp/mario_gif_by_ivanrussiansky_d9f6x59.gif");
        background-repeat: no-repeat;
        background-size: cover;
        margin:1em;
        font-family:sans-serif;
/*                 perspective:100vw; */
      }
      .main{
        transform-style:preserve-3d;
        width:200px;
        height:200px;
        margin:auto;
        transform:translatey(300px);
        animation:main 0.5s infinite linear alternate;
      }
      .all_plate{
        width:200px;
        height:200px;
        position:relative;
        transform-style:preserve-3d;
        transform:rotateX(60deg);
/*                 background:red; */
        animation:base 10s infinite linear;
      }
      .plate{
        transform-style:preserve-3d;
        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);
        }
      }
      
       .place {
        position: relative;
		  width: 200px;
        height: 200px;
        margin: auto;
      }
      
      .place:hover .coin {
      	animation: move 2s linear;
      }
      
      .coin{
		background-image: url("https://thumbs.gfycat.com/ImmaterialCandidBooby-size_restricted.gif");
        background-size:cover;
        position:absolute;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        opacity: 1;
/*         transition: top .5s linear, opacity 1.5s linear; */
        z-index: -99;
        
      }
      
      @keyframes move {
        0% {
           z-index: 99;
        }
        100% {
			  opacity: 0;
           z-index: 99;
           top: -200%;
        }
      }
      
    </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 class="plate p5">
        </div>
        <div class="plate p6">
        </div>
      
    </div>
</div>
  		<div class="place">
         <div class="coin">
        </div>
    </div>
     
   
  </body>
</html>