practice animation (Copy 11568) (Copy 11577)

✨ นายณัชพล ตั้งสาธิตพร

<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, #602AC3, #0C343D);
			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;
/*         transform:rotateX(70deg) rotateZ(180deg) */
        
        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://i.scdn.co/image/ab67616d0000b2734133716cfc80f0a138dc5719');
        
      }
      .p2{
        width:50px;
        height:300px;
        background: hsl(280, 27%, 74%);
        transform:rotateX(-90deg) rotatey(90deg);
        transform-origin:left bottom;
        
      }
      .p3{
        width:50px;
        height:300px;
        background: hsl(280, 27%, 74%);
        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(280, 27%, 74%, .8);
        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(280, 27%, 74%);
      }
      .p6 {
        width:300px;
        height:50px;
        transform:translateY(250px) translateZ(300px);
        background: hsl(280, 27%, 65%);
        transition: transform 1s;
        
      }
      .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);
        transition: transform 3s;
      }
      .all_plate:hover .shellac {
        transform:rotateX(-90deg) translateY(-400px) translateZ(130px) rotateZ(360deg);
      }
      
   	.all_plate:hover .p6 {
        transform:rotateX(-90deg) translateY(-300px) translateZ(250px) ;
      }
      
      #lilac {
        width: 100%;
        height: 100%;
        transform: scale(0.35);
        background-image: url('https://m.media-amazon.com/images/I/71LqiHHyI-L._SL1400_.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="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>
  </body>
</html>