ต้า-ภาคิน

✨ PAKIN KAOPHUTHAI

<!-- 
เรื่อง animation / Transform / Position / Transition
ทำให้เกิด Animation ที่มากกว่าแค่ from .. to แต่ให้เป็นหลายๆ ขั้นได้
โดยแผ่นไม้ ต้องมีการเปลีย่นแปลงมากกว่า 2 มิติ 
นำความรู้เรื่อง Position มาใช้ขยับ ควรทำให้ box-shadow เปลี่ยนด้วย
ลองหมุน ลองเปลี่ยนไซส์ หรืออะไรก็ได้ เพื่อโชว์การเปลี่ยนแปลงของ div
Hint ใช้ % แทน from/to ใน keyframes
(แก้ภาพเป็นอย่างอื่นได้ ทั้งภาพพื้นหลังและแผ่นไม้)

แอบสังเกต โจทย์นี้ใช้ทั้ง vmin vh vw เลย น่าสนใจมาก ว่ามันคืออะไร
-->
<style>
  body{
    height:100vh;
    background-image:url('https://www.scholarship.in.th/wp-content/uploads/2014/08/green_leaves-HD.jpg');
    background-size:cover;
  }
  div{
    background-image:url('https://st4.depositphotos.com/1594920/22122/i/600/depositphotos_221228584-stock-photo-grove-snail-or-brown-lipped.jpg');
    height:40vmin;
    width:80vmin;
    top:30vh;
    left:10vw;
    position:absolute;
    border-radius:2vmin;
    box-shadow:0px 1vmin 1vmin #0005;
  }
  div:hover{
	 width: 90vmin;
    height: 50vmin;
    animation: move 1s infinite alternate;
  }
  @keyframes move{
    from{transform: rotateY(0deg) rotateY(0deg);}
    to{transform: rotateY(100deg) rotateY(100deg);}
  }
</style>
<div>
</div>