เรียน CSS Animation | Day 3 - Simple Hover
เขียนวันที่ : Jan 5, 2023

สวัสดีครับ วันที่ 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 มันขยับขึ้น ลง ในแนวแกน Yscale
- ถ้าต้องการให้ 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 ❤️