طراحی افکت باز شدن کارت با CSS

افکت باز شدن کارت (card opening) یکی از متداول‌ترین انیمیشن‌ها در طراحی رابط کاربری است که می‌تواند تعامل و تمرکز کاربر را افزایش دهد. این افکت می‌تواند به صورت گردش سه‌بعدی، تا شدن لبه یا باز شدن به‌صورت کشویی پیاده‌سازی شود. در این مقاله با مفاهیم پایه، مثال عملی، نکات دسترسی و بهینه‌سازی آشنا می‌شوید تا بتوانید افکت آماده و قابل استفاده در پروژه‌ها بسازید.

چرا از CSS استفاده کنیم؟

استفاده از CSS برای این افکت باعث می‌شود انیمیشن روان‌تر، کم‌حجم‌تر و بدون وابستگی به جاوااسکریپت باشد. با به‌کارگیری transform و transition یا keyframes می‌توان انیمیشن‌های سخت‌افزاری شتاب‌گرفته (GPU accelerated) ایجاد کرد.

ساختار HTML پایه

<label class="card-toggle" for="card-open">
  <input id="card-open" type="checkbox">
  <div class="card">
    <div class="card__front">
      <h3>Front</h3>
      <p>Click to open</p>
    </div>
    <div class="card__back">
      <h3>Back</h3>
      <p>More info here</p>
    </div>
  </div>
</label>

توضیح: این ساختار از یک ورودی checkbox استفاده می‌کند تا فقط با CSS حالت باز/بسته کارت کنترل شود (روش بدون جاوااسکریپت یا “checkbox hack”). .card__front و .card__back دو وجه کارت هستند.

CSS پایه و افکت سه‌بعدی

.card-toggle { display:inline-block; cursor:pointer; }
.card { width:300px; height:180px; perspective:1000px; }
.card > .card__front,
.card > .card__back {
  width:100%; height:100%; position:absolute; top:0; left:0;
  backface-visibility:hidden; transform-style:preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.9,.2,1);
  border-radius:8px; overflow:hidden;
}
.card__front { background:#fff; z-index:2; transform:rotateY(0deg); }
.card__back  { background:#f3f3f8; transform:rotateY(-180deg); }

/* وقتی checkbox تیک خورد کارت برمی‌گردد */.card-toggle input[type="checkbox"]:checked + .card .card__front {
  transform:rotateY(180deg);
}
.card-toggle input[type="checkbox"]:checked + .card .card__back {
  transform:rotateY(0deg);
}

/* ظاهرسازی ساده */.card__front, .card__back { display:flex; align-items:center; justify-content:center; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,0.12); }

توضیح: در این CSS از perspective روی والد برای ایجاد عمق استفاده شده و هر وجه کارت با transform و backface-visibility پنهان/نمایان می‌شود. transition با cubic-bezier برای حس طبیعی‌تر حرکت تنظیم شده است. تغییرات هنگام تیک خوردن ورودی، transform هر وجه را عوض می‌کند تا افکت باز شدن ایجاد شود.

دستورالعمل‌های دسترسی و تعامل کاربر

• استفاده از tabindex یا عناصر قابل فوکوس برای دسترسی صفحه‌کلید.
• افزودن aria-expanded یا aria-controls برای اطلاع‌رسانی وضعیت به تکنولوژی‌های کمکی.
• توجه به prefers-reduced-motion کاربران؛ انیمیشن‌ها را برای آنها کاهش دهید.

نمونه بهبود یافته: prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .card > .card__front,
  .card > .card__back {
    transition: none;
  }
}

توضیح: این بخش باعث می‌شود اگر کاربر در تنظیمات سیستم درخواست کاهش حرکت داشته باشد، انیمیشن‌ها غیرفعال شوند. این نکته اهمیت بالایی در دسترس‌پذیری دارد.

مثال با جاوااسکریپت برای کنترل دقیق‌تر

// Simple JS to toggle aria-expanded and keyboard accessibility
const label = document.querySelector('.card-toggle');
const checkbox = label.querySelector('input[type="checkbox"]');

label.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    checkbox.checked = !checkbox.checked;
    checkbox.dispatchEvent(new Event('change'));
  }
});

checkbox.addEventListener('change', () => {
  label.setAttribute('aria-expanded', checkbox.checked);
});

توضیح: این اسکریپت کوچک باعث می‌شود وقتی کاربر با صفحه‌کلید (Enter یا Space) روی کارت عمل می‌کند، وضعیت checkbox تغییر کند و aria-expanded بروزرسانی شود. این روش کارایی و دسترسی را بهتر می‌کند.

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

• از transform به جای top/left برای حرکت دادن عناصر استفاده کنید تا از رندرینگ GPU بهره ببرید.
• مقدار perspective را متناسب با اندازه کارت تنظیم کنید؛ مقادیر کوچکتر عمق بیشتری نشان می‌دهند.
• برای جلوگیری از فلش در برخی مرورگرها، از backface-visibility و -webkit-backface-visibility استفاده کنید.
• اگر کارت شامل عکس بزرگ است، از lazy-loading یا تصاویر کم‌حجم استفاده کنید تا بارگذاری اولیه سبک بماند.

نمونه کامل: طرح بازشونده با تا شدن گوشه

/* Simplified CSS for a corner-flip effect */.card { position:relative; width:280px; height:160px; perspective:900px; }
.card__inner { position:absolute; inset:0; transform-origin: top left; transition: transform 450ms ease; transform-style:preserve-3d; }
.card-toggle input:checked + .card .card__inner {
  transform: rotateX(-15deg) rotateY(12deg) translateZ(10px);
}
/* Add shadow and background transitions as needed */

توضیح: این قطعه نشان می‌دهد چگونه با تغییر transform-origin و ترکیب rotateX/rotateY می‌توان افکت باز شدن گوشه‌ای یا book-like ایجاد کرد. translateZ به جلو بردن کارت کمک می‌کند تا جلوه سه‌بعدی واضح‌تر شود.

جدول مرجع سریع خصوصیات کلیدی

نتیجه‌گیری و موارد کاربرد

افکت باز شدن کارت با CSS می‌تواند در کارت‌های محصول، کارت‌های نمایشی تیم، onboarding و نمایش جزئیات (detail reveal) استفاده شود. با رعایت اصول دسترسی، بهینه‌سازی عملکرد و استفاده از قابلیت‌های CSS مدرن، می‌توانید افکتی جذاب، روان و قابل دسترس بسازید. توصیه می‌کنم همیشه آزمایش روی دستگاه‌های موبایل و مرورگرهای مختلف انجام شود و گزینه‌ای برای کاربران با نیاز به کاهش حرکت فراهم کنید.

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

ارسال