practice animation (Branch 11551) (Copy 11563)

✨ Apichet Komwatcharapong

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Yeseva+One&display=swap');
      * {
        margin:0;
        padding:0;
      }
      body{
			background: linear-gradient(-45deg, #fff, #ebd9bb);
			background-size: 200% 200%;
			animation: gradient 10s ease infinite;
      }
      p{
        margin-top: 50px;
        text-align:center;
        font-size: 5em;
        font-family: 'Yeseva One', cursive;
        color: #000;
      }
      .main{
        transform-style:preserve-3d;
        width:300px;
        height:300px;
        margin: auto;
        transform:translatey(300px);
        animation:main 2s infinite linear alternate;
      }
      .all_plate{
        display:flex;
        transform-style:preserve-3d;
        animation:base 9s infinite ease;
      }
      .plate{
        transform-style:preserve-3d;
        transform-origin:center bottom;
        background-size:cover;
        background-position:center;
        position:absolute;
        left:0;
        top:0;
      }
      .p1{
        width:300px;
        height:300px;
        transform:rotateX(-90deg);
        background-image: url('https://cdn.discordapp.com/attachments/934448090172239882/938360882654744606/IMG_1084.jpg');
        
      }
      .p2{
        width:50px;
        height:300px;
        background: hsl(31, 50%, 80%);
        transform:rotateX(-90deg) rotatey(90deg);
        transform-origin:left bottom;
        
      }
      .p3{
        width:50px;
        height:300px;
        background: hsl(31, 50%, 80%);
        transform:rotateX(-90deg) rotatey(-90deg) translateZ(-250px);
        transform-origin:right bottom;
        
      }
      .p4{
        width:300px;
        height:300px;
        transform:rotateX(-90deg) rotateY(180deg) translateZ(50px);
        background: hsla(31, 80%, 90%, .7);
        box-shadow:0px -100px 200px #0006 inset;
        transform-origin:center bottom;
        background-size:cover;
        background-position:top center;
      }
      .p5 {
        width:300px;
        height:50px;
        transform:translateY(250px);
        background: hsl(31, 50%, 69%);
      }
      .p6 {
        width:300px;
        height:50px;
        transform:translateY(250px) translateZ(300px);
        background: hsl(31, 50%, 69%);
      }
      .shellac {
        width:300px;
        height:300px;
        background-image: url('https://cdn.discordapp.com/attachments/812749326543487058/937928372221255690/vinyl_PNG18.png');
        background-size: cover;
        transform:rotateX(-90deg) translateY(-150px) translateZ(101px);
        
      }
      #tasty {
        width: 100%;
        height: 100%;
        transform: scale(0.35);
        background-image: url('https://cdn.discordapp.com/attachments/934448090172239882/938361526446874654/IMG_1085.jpg');
        background-size: cover;
        border-radius: 50%;
        }
      @keyframes base{
        0%{
          transform:rotateX(70deg) rotateZ(0deg)}
        100%{
          transform:rotateX(70deg) rotateZ(360deg)
        }
      }
		@keyframes gradient {
			50% {
				background-position: 100% 50%;
			}
		}
    </style>
  </head>
  <body>
    <p>
      A-Neng's<br>Favorite song
    </p>
    <div class="main">
      <div class="all_plate">
        <div class="shellac"><div id="tasty"></div></div>
        <div class="plate p1">
        </div>
        <div class="plate p2">
        </div>
        <div class="plate p4">
        </div>
        <div class="plate p5">
        </div>
        <div class="plate p6">
        </div>
        <div class="plate p3">
        </div>
      </div>
    </div>
  </body>
</html>