practice animation

✨ นางสาวกัลยกร ยี่นาง

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Mitr:wght@300&family=Yeseva+One&display=swap');
      * {
        margin:0;
        padding:0;
      }
      body {
        background: #e9e9e9;
      }
      .title {
        margin-top: 5vh;
        margin-bottom: 5vh;
        text-align:center;
        font-size: 9vh;
        font-family: 'Yeseva One', cursive;
        color: #000;
      }
      .content {
        font-family: 'Mitr', sans-serif;
        letter-spacing: 2px;
        line-height: 3.5vh;
        text-align: center;
        margin-top: 12.5vh;
        font-size: 3vh;
        color: white;
      }
      .main{
        transform-style:preserve-3d;
        width:30vh;
        height:30vh;
        margin: auto;
        transform:translatey(20vh);
        animation:main 2s infinite linear alternate;
      }
      .all_plate{
        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:30vh;
        height:30vh;
        transform:rotateX(-90deg);
        background-image: url('https://s.isanook.com/jo/0/rp/r/w700/ya0xa0m1w0/aHR0cDovL2ltYWdlLmpvb3guY29tL0pPT1hjb3Zlci8wLzljMWJmMGMxNTA0ZjRlOWEvMTAwMC5qcGc=.jpg');
        
      }
      .p2{
        width:5vh;
        height:30vh;
        background: hsl(280, 27%, 74%);
        transform:rotateX(-90deg) rotatey(90deg);
        transform-origin:left bottom;
      }
      .p3{
        width:5vh;
        height:30vh;
        background: hsl(280, 27%, 74%);
        transform:rotateX(-90deg) rotatey(-90deg) translateZ(-25vh);
        transform-origin:right bottom;
      }
      .p4{
        width:30vh;
        height:30vh;
        transform:rotateX(-90deg) rotateY(180deg) translateZ(5vh);
        background: hsla(280, 27%, 74%, .8);
        box-shadow:0px -100px 200px #0006 inset;
        transform-origin:center bottom;
        background-size:cover;
        background-position:top center;
      }
      .p5 {
        width:30vh;
        height:5vh;
        transform:translateY(25vh);
        background: hsl(280, 27%, 74%);
      }
      .p6 {
        width:30vh;
        height:5vh;
        transform:translateY(25vh) translateZ(30vh);
        background: hsl(280, 27%, 65%);
        transition: transform 1s;
        transition-delay: 1.85s;
      }
      .shellac {
        width:30vh;
        height:30vh;
        background-image: url('https://cdn.discordapp.com/attachments/812749326543487058/937928372221255690/vinyl_PNG18.png');
        background-size: cover;
        transform:rotateX(-90deg) translateY(-15vh) translateZ(10.1vh);
        transition: transform 3s;
      }
      .all_plate:hover .shellac {
        transform:rotateX(-90deg) translateY(-40vh) translateZ(13vh) rotateZ(360deg);
      }
      
   	.all_plate:hover .p6 {
        transform:rotateX(-90deg) translateY(-30vh) translateZ(25vh) ;
        transition-delay: 0s;
      }
      #lilac {
        width: 100%;
        height: 100%;
        transform: scale(0.35);
        background-image: url('https://pbs.twimg.com/profile_images/1374979417915547648/vKspl9Et_400x400.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%;
			}
		}
      .box {
        background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
        background-size: 200% 200%;
        animation: gradient 10s linear infinite;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        width: 45vh;
        height: 53.5vh;
        margin: auto;
        box-shadow: rgba(255, 255, 255, 0.5) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
      }
    </style>
  </head>
  <body>
    <p class="title">A-Neng's<br>Favorite song</p>
    <div class="box">
      <div class="main">
        <div class="all_plate">
          <div class="shellac"><div id="lilac"></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>
      <p class="content">LILAC<br>MhuuKrob's pick</p>
    </div>
  </body>
</html>