Learn #CSS #Animation | Day 2 - Flip Card
เรียนรู้การทำ CSS Animation วันที่ 2

---------
Demo : https://codepen.io/Phonbopit/pen/zYLBWxO
Blog: https://devahoy.com/tutorials/learn-c...
---------

เรียนรู้เรื่องการใช้ rotateY ร่วมกับ preserve-3d, backface-visibility และ perspective

1. กำหนด perspective ให้กับ .card หลัก เพื่อให้มี effect 3d ตอนที่ทำคลิป ลืมพูดถึง

```css
.card {
perspective: 1000px;
}
```

2. ตัว wrapper กำหนดให้ transform style เป็นแบบ preserve 3d

```css
.card-wrapper {
transform-style: preserve-3d;
}
```
3. ใช้ backface-visibility จัดการ front, back ของ card

4. กำหนด grid template

5. random ค่าหลังบัตร ด้วย JavaScript ง่ายๆ ด้วย querySelectorAll

DONE ❤️

___________________________________

ติดตาม Devahoy เพิ่มเติมได้ที่
Website: https://devahoy.com/
Facebook:   / devahoy  
LINE: @Devahoy
___________________________________