เรียน​ CSS Animation | Day 2 - Card Flip

สวัสดีครับ โพสนี้ผมตั้งใจทำขึ้นมาเพื่อเป็น Challenge ตัวเองในการฝึกเขียน CSS Animation ครับ

วันที่ 2 ฝึกการทำ Card Flip ครับ หลังจากได้ทำลง Codepen เสร็จ และอัพคลิป video ลง Youtube เรียบร้อยแล้ว ก็ลองไปค้นหาเพิ่มเติม พบว่ามีหลายๆ วิธีที่ทำการ flip ง่ายกว่าตัวอย่างนี้นะครับ จุดประสงค์ของโพสนี้คือ บันทึกสิ่งที่ตัวเองได้เรียนรู้มา ฉะนั้น อาจจะไม่ใช่วิธีที่ดีที่สุด หรือบางส่วนผมอาจจะผิด เข้าใจผิด ก็ได้ สามารถแนะนำ ติชมได้ครับ

Day 2 - Card Flip

สำหรับวันแรกผลลัพธ์จะเป็นแบบนี้

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

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

Step 1 - สร้าง Markup

เริ่มต้น เราจะมา build HTML ขึ้นมาก่อน โดยผมกำหนด card, card-wrapper ข้างในมี card-back และ card-front

// ใช้ emmet .card>.card-wrapper>.card-front+.card-back (แล้วกด Tab)

<div class="card">
  <div class="card-wrapper">
    <div class="card-front"></div>
    <div class="card-back">
      <div class="content">B</div>
    </div>
  </div>
</div>

Step 2 - จัด CSS

• ตัว .card-wrapper ใช้ transform-style: preserve-3d เพื่อให้เป็นมุมมองแบบ 3D
• .card-front และ .card-back เป็น absolute อยู่ตำแหน่งเดียวกัน และใช้ rotateY(180deg) เพื่อสลับด้าน โดยมี backface-visibility: hidden ช่วย ทำให้เราจะไม่เห็นด้านหลังของ 3d

.card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in;
}

.card-front,
.card-back {
  position: absolute;
  background-color: var(--primary-color);
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.25rem;
}

.card-back {
  transform: rotateY(180deg);
  background-color: #2384df;
}

สุดท้าย ตอน mouse hover เราก็เพิ่มการ rotate ให้กับ .card-wrapper

.card:hover .card-wrapper {
  transform: rotatey(180deg);
}

เพียงแค่นี้เราก็ได้ Card Flip ง่ายๆแล้ว

Step 3 - เพิ่ม Items

ขั้นตอนนี้ผมจะเพิ่มจำนวน card ให้อยู่ใน grid ที่ผมสร้างไว้ จำนวน 18 cards โดยที่กำหนด grid ไว้แบบนี้

.cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-row-gap: 1rem;
}

ตัว HTML ผมสร้าง div.grids มาหุ้ม ส่วน card ทั้งหมด และก็สร้าง card ใหม่ 18 ตัว แบบนี้ (ใช้ emmet)

.card*18>.card-wrapper>.card-front+.card-back>.card-content{B} แล้วกด Tab

ขั้นตอนนี้ผมเพิ่ม .content เข้ามาด้วย โดยกำหนด default ด้านหลังบัตรเป็น B (เดี๋ยวจะเปลี่ยนด้วย JavaScript)

Step 4 - เปลี่ยน content ด้วย JavaScript

ขั้นตอนนี้ ผมต้องการเปลี่ยน content ด้านหลังบัตร นิดนึง ให้มัน random จาก list ของ emoji ด้วยการใช้ JavaScript โดยการใช้ querySelectorAll จากนั้นก็ loop ด้วย forEach เพื่อนำ random emoji มา set ด้วย textContent

let emojis = ["❤️", "💰", "💻", "🚗", "🏠", "✈️"];

let contentElements = document.querySelectorAll(".card-back .content");

contentElements.forEach((ele) => {
  let rand = Math.floor(Math.random() * emojis.length);
  ele.textContent = emojis[rand];
});

เพียงเท่านี้ ก็ได้ Card Flip ง่ายๆ แล้วครับ สำหรับเรื่องวันนี้ จริงๆ ให้ผมนั่งทำเอง ก็คิดไม่ออกครับ เลยไปดูตัวอย่างและลองหาวิธีของคนอื่นๆ ทำยังไง สิ่งที่ได้เรียนรู้เพิ่มก็คือ

• preserve-3d และ backface-visibility

รวมถึงเวอร์ชั่นแรกที่ผมลองทำเอง ก็ได้เรียนรู้เรื่องของ CSS counters

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

Happy Coding ❤️