Week 1 (Copy 921)

✨ นางสาวภาวินี ทองบ่อ

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');
*{
    box-sizing: border-box;
}
body{
  background: linear-gradient(to bottom right, rgba(78,113,143,1) 31%, rgba(19,44,75,1) 100%);
  font-family:'Kanit', sans-serif;
}
.scene{
  position: relative;
  height: 250px;
  width: 210px;
  perspective: 500px;
  margin: 100px 0;
  margin: 100px auto;
}
.all_card{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-288px);
    transition: transform 1s;
    animation-name: spin;
    animation-duration: 25s;
    animation-iteration-count: infinite;
}
.card{
    background-color: white;
    position: absolute;
    width: 200px;
    height: 200px;
    margin: 50px;
    left: 10px;
    top: 10px;
    border-radius:10%;
    
    border: 2px solid black;
    line-height: 116px;
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-align: center;
    transition: transform 1s, opacity 1s;
    animation-name: yoop;
    animation-duration: 25s;
    animation-iteration-count: infinite;

}

.card:nth-child(1) { transform: rotateY(  0deg) translateZ(288px); }
.card:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.card:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.card:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.card:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.card:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.card:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.card:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.card:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }

@keyframes spin{
    0%{
        transform: rotateY(0deg);
    }
    10%{
        transform: rotateY(-40deg);
    }
    20%{
        transform: rotateY(-80deg);
    }
    30%{
        transform: rotateY(-120deg);
    }
    40%{
        transform: rotateY(-160deg);
    }
    50%{
        transform: rotateY(-200deg);
    }
    60%{
        transform: rotateY(-240deg);
    }
    70%{
        transform: rotateY(-280deg);
    }
    80%{
        transform: rotateY(-320deg);
    }
    90%{
        transform: rotateY(-340deg);
    }
    100%{
        transform: rotateY(-360deg);
    }
}
@keyframes yoop{
    0%{

}

.facebook_pic{
  border-radius: 50%;
  width: 50%;
  background-color: white;
  padding-top: 50%;
  background-size: cover;
  background-position: center;

}
/*         margin-top: 5px;
        margin-bottom: 30px;
        	height: 100px;
  			width: 100px;
        object-fit: cover;
        object-position: top center;
  			border-radius: 50%;
			background: linear-gradient(to right, #FF6355, #FAE442, #8BD448);
			padding: 10px;
  			box-shadow: 0 10px 50px hsl(260, 100%, 28%);
      } */
    </style>
  </head>
  <body>
    
    <div class="scene">
  <div class="all_card">
    <div class="card" style="background-color:#b7dddb;">
      <div class="facebook_pic" style="background-image:url(https://cdn.discordapp.com/attachments/798210236095004682/798817848037343232/image0.jpg)"></div>

</div>
    <div class="card">
      <div class="facebook_pic" style="background-image:url(https://i.imgur.com/DPaYJFM.png)"></div>

</div>
    <div class="card">
      <div class="facebook_pic" style="background-image:url(https://cdn.discordapp.com/attachments/798210236095004682/798817684576796682/received_183728726204865.jpeg)"></div>
    </div>
    <div class="card" style="background-color:#b7dddb;">
      <div class="facebook_pic" style="background-image:url(https://scontent.fbkk2-3.fna.fbcdn.net/v/t1.0-1/p240x240/131525644_3758016890915770_2857073027609514557_n.jpg?_nc_cat=107&ccb=2&_nc_sid=7206a8&_nc_eui2=AeHNho-LvgCena2we59O2BeIaclFj3iKLFFpyUWPeIosUVp1z7MPApaawYkDQHka_O1V4uQ7yjKmWOyFhMuzQXV7&_nc_ohc=IHHpxMraEbcAX_7y-75&_nc_ht=scontent.fbkk2-3.fna&tp=6&oh=7bf3a7bc260f08d237f6c78b3c4f5c5a&oe=60366A03)"></div>
    </div>
    <div class="card">
      <div class="facebook_pic" style="background-image:url(https://cdn.discordapp.com/attachments/798210236095004682/798817848037343232/image0.jpg)"></div>

    </div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
   </div>
</div>
  </body>
</html>