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> <!-- <img src="" class="facebook_pic"> --> </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>