ساخت کارت flip دوطرفه با CSS — راهنمای کامل

کارت‌های flip (چرخان) دوطرفه به‌خوبی برای نمایش اطلاعات فشرده مثل کارت معرفی، محصول یا آمار مناسب‌اند. در این مقاله با ساختار HTML، استایل‌های CSS، نکات دسترس‌پذیری، بهینه‌سازی عملکرد و نمونه‌های عملی آشنا می‌شوید تا بتوانید کارت‌های 3D منعطف و قابل استفاده بسازید.

۱. ساختار پایه HTML

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>Front</h3>
      <p>Front content</p>
    </div>
    <div class="flip-card-back">
      <h3>Back</h3>
      <p>Back content</p>
    </div>
  </div>
</div>

این ساختار سه‌لایه است: ظرف اصلی (flip-card)، لایه داخلی که چرخش را انجام می‌دهد (flip-card-inner)، و دو صورت کارت (front و back). دلیل استفاده از ساختار تو در تو، حفظ فضای سه‌بعدی و تسهیل انیمیشن‌ها است.

۲. استایل پایه با CSS

.flip-card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.flip-card-front {
  background: linear-gradient(135deg,#f0f4ff,#dfe8ff);
}

.flip-card-back {
  background: linear-gradient(135deg,#ffeedd,#ffd5b3);
  transform: rotateY(180deg);
}

این CSS یک کارت با انیمیشن چرخش ایجاد می‌کند. perspective به ظرف والد اضافه شده تا حس سه‌بعدی ایجاد شود. transform-style: preserve-3d تضمین می‌کند که فرزندان در فضای سه‌بعدی باقی می‌مانند. از backface-visibility برای مخفی‌سازی پشت هر طرف استفاده شده است.

۳. افزودن دسترسی و پشتیبانی لمسی

در لمس، :hover کارایی ندارد. بهتر است با جاوااسکریپت یک کلاس برای تغییر حالت اضافه کنیم و همچنین امکان فشردن با کیبورد را فراهم کنیم.

// Toggle flip on click or Enter/Space
document.querySelectorAll('.flip-card').forEach(card => {
  card.setAttribute('tabindex', '0'); // قابل فوکوس شدن
  card.addEventListener('click', () => {
    card.classList.toggle('is-flipped');
  });
  card.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      card.classList.toggle('is-flipped');
    }
  });
});

این اسکریپت هر کارت را قابل فوکوس می‌کند و روی کلیک یا فشردن Enter/Space کلاس is-flipped را سوئیچ می‌کند. سپس در CSS باید حالت جایگزین را تعریف کنیم:

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

با این روش کارت روی موبایل و دسکتاپ با صفحه‌کلید قابل کنترل است که شرط لازم برای دسترس‌پذیری است.

۴. جدول توضیح خواص کلیدی CSS

۵. نکات پیشرفته و بهینه‌سازی

• ترکیب GPU: از transform و opacity استفاده کنید تا مرورگر عملیات را روی GPU انجام دهد و رندر روان‌تر شود.
• سازگاری مرورگر: برای پشتیبانی بهتر از مرورگرهای قدیمی، پیشوندهای -webkit- را اضافه کنید.
• محتوای پشتی: وقتی کارت می‌چرخد، مطمئن شوید محتوای پشت بار معنایی مستقل دارد (مثلاً افزودن aria-label یا توضیحات متنی).
• رنگ و کنتراست: برای دسترسی، متن و پس‌زمینه باید کنتراست کافی داشته باشند.
• انیمیشن‌های نرم‌تر: از cubic-bezier برای تنظیم سرعت انیمیشن مطابق نیاز استفاده کنید.

۶. نمونه کامل و بهبود یافته (HTML + CSS)

<!-- HTML -->
<div class="flip-card" role="button" aria-pressed="false">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>Product</h3>
      <p>$29.99</p>
    </div>
    <div class="flip-card-back">
      <h3>Details</h3>
      <p>Specs and CTA</p>
    </div>
  </div>
</div>

در این HTML از نقش (role=”button”) برای اطلاع‌رسانی به صفحه‌خوان استفاده شده و aria-pressed می‌تواند با جاوااسکریپت به‌روزرسانی شود.

/* CSS adjustments */.flip-card {
  width: 100%;
  max-width: 320px;
  height: 200px;
  margin: 12px;
  perspective: 900px;
  cursor: pointer;
  outline: none;
}

.flip-card:focus {
  box-shadow: 0 0 0 4px rgba(21,156,228,0.4);
}

استایل بالا کارت را ریسپانسیو و قابل دسترس می‌کند. از max-width و cursor استفاده شده و تمرکز با box-shadow واضح می‌شود.

۷. موارد کاربرد و ایده‌ها

• کارت محصول: نمایش عکس در جلو و مشخصات + دکمه خرید در پشت.
• کارت تیم: تصویر یا نام در جلو و بیوگرافی در پشت.
• گیمیفیکیشن: کارت‌های امتیاز که با کلیک امتیاز و جزئیات را نشان می‌دهند.
• داشبوردها: خلاصه آماری در جلو و گراف/توضیحات در پشت.

۸. جمع‌بندی و بهترین روش‌ها

برای کارت flip دوطرفه با CSS، ساختار منظم HTML، استفاده از perspective و preserve-3d، و پنهان‌سازی backface بسیار مهم‌اند. برای پشتیبانی لمسی و دسترسی کیبورد از جاوااسکریپت ساده برای سوئیچ کلاس استفاده کنید. همیشه به عملکرد (GPU-accelerated transforms)، کنتراست و سازگاری مرورگر توجه داشته باشید.

با رعایت این نکات می‌توانید کارت‌های جذاب، سریع و قابل استفاده بسازید که در پروژه‌های مختلف از رابط‌های کاربری گرفته تا صفحات محصول کاربرد دارند.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال