เรียน​ CSS Animation | Day 3 - Simple Hover

สวัสดีครับ วันที่ 3 เนื่องจากไม่มีเวลาเท่าไหร่ ทำให้วันนี้ไม่ได้เรียนรู้อะไรมาก เลยมาทำ Hover Effect ง่ายๆครับ โดยใช้ rotate, translateY และ scale

Day 3 - Simple Hover

โค๊ดบน Codepen

See the Pen on https://codepen.io/phonbopit/pen/QWBKjPR/

สามารถดูแบบ Video ได้จาก Link Youtube ครับ

Step 1 - สร้าง Markup

วันนี้ไม่มีอะไรมาก เพียงแค่สร้าง div.card ขึ้นมา

// ใช้ emmet .grid>.card*6

<div class="grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Step 2 - Hover Transition

ทำการ Transtion ง่ายๆ ด้วยการใช้

• rotate - ถ้าต้องการให้ตัว card มันหมุนตามทิศทาง องศา ที่เราต้องการ
• translateY - ถ้าต้องการให้ card มันขยับขึ้น ลง ในแนวแกน Y
• scale - ถ้าต้องการให้ card มันขยาย หรือ ย่อขนาดได้

ก็ได้จะ CSS ประมาณนี้

.card:hover {
  box-shadow: 0 0 20px 4px #d90429;
  transition: all 0.5s ease-in-out;
  transform: rotate(5deg) translatey(-15px);
  /*   transform: scale(1.1); */
  /*   transform: translatey(-10px); */
}

เรียบร้อย วันนี้ก็มีเท่านี้แหละครับ อย่างที่บอก ด้วยข้อจำกัด เรื่องเวลา 🤣

ไว้เจอกันใหม่บล็อกหน้าครับ สวัสดีครับ

Happy Coding ❤️