ساخت افکت سه بعدی hover با CSS

افکت‌های سه‌بعدی هنگام hover می‌توانند تجربه کاربری را جذاب کنند و توجه کاربر را به عناصر مهم صفحه جلب نمایند. با استفاده از چند ویژگی سادهٔ CSS مثل transform، perspective و box-shadow می‌توان بدون کتابخانهٔ خارجی افکت‌های عمق، شیب و برجستگی ساخت. در این مقاله به چند روش عملی، نمونهٔ کد و نکات بهینه‌سازی و دسترس‌پذیری می‌پردازیم.

پیش‌نیازها و مفاهیم کلیدی

• perspective: عمق دید سه‌بعدی را تعریف می‌کند.
• transform: rotateX/rotateY/translateZ: برای چرخش و جابجایی در محورهای سه‌بعدی.
• transform-style: preserve-3d: برای نگهداری لایه‌های داخلی در فضای سه‌بعدی.
• transition: برای انیمیشن نرم هنگام hover.

مثال ساده: کارت با افکت سه‌بعدی هنگام hover

<!-- HTML -->
<div class="card-wrap">
  <div class="card">
    <h3>عنوان کارت</h3>
    <p>توضیحات کوتاه</p>
  </div>
</div>

<!-- CSS -->
.card-wrap{
  perspective: 1000px;
  display: inline-block;
}
.card{
  width: 280px;
  height: 180px;
  background: linear-gradient(135deg,#4e54c8,#8f94fb);
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms;
  transform-origin: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.card-wrap:hover .card{
  transform: rotateX(8deg) rotateY(-10deg) translateZ(20px);
  box-shadow: 0 25px 45px rgba(0,0,0,0.25);
}

این کد یک کارت ساده را با یک container دارای perspective نمایش می‌دهد. هنگام hover روی والد (.card-wrap) کارت کمی می‌چرخد و جلو می‌آید (translateZ) تا حس عمق ایجاد شود. transition باعث می‌شود حرکت نرم و طبیعی باشد.

توضیح فنی

• قرار دادن perspective روی والد باعث تعیین فاصلهٔ دید دوربین می‌شود؛ هرچه کمتر باشد، اثر سه‌بعدی شدیدتر است.
• استفاده از rotateX و rotateY چرخش حول محورها را شبیه‌سازی می‌کند.
• افزایش box-shadow هنگام hover حس بلند شدن از سطح را تقویت می‌کند.

افزایش واقع‌گرایی با preserve-3d و pseudo-elements

برای ساخت عمق واقعی‌تر می‌توان از لایه‌های متعدد (مثلاً سایه‌های مختلف یا نور) با ::before و ::after استفاده و آن‌ها را در فضای سه‌بعدی نگه داشت.

.card{
  position: relative;
  transform-style: preserve-3d;
}
.card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
  border-radius: 12px;
  transform: translateZ(30px) scale(0.98);
  transition: transform 300ms;
  pointer-events: none;
}
.card-wrap:hover .card::before{
  transform: translateZ(60px) scale(1);
}

در این کد transform-style: preserve-3d به مرورگر می‌گوید عناصر فرزند در فضای سه‌بعدی حفظ شوند. از یک pseudo-element برای شبیه‌سازی نور یا برآمدگی سطح استفاده شده که با translateZ جلوتر قرار می‌گیرد و هنگام hover عمق آن تغییر می‌کند.

افکت tilt پویا با استفاده از CSS متغیرها و JavaScript (اختیاری)

برای تجربهٔ تعاملی‌تر می‌توان از حرکت ماوس برای تعیین زاویهٔ چرخش استفاده کرد. این بخش نشان می‌دهد چگونه با CSS variables و یک اسکریپت کوچک، tilt را پیاده‌سازی کنیم.

<!-- HTML -->
<div class="tilt-wrap">
  <div class="tilt-card">Hover me</div>
</div>

<!-- CSS -->
.tilt-wrap{
  perspective: 1200px;
  display: inline-block;
}
.tilt-card{
  width: 320px;
  height: 200px;
  background: linear-gradient(135deg,#ff6a00,#ee0979);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  transition: transform 200ms ease-out;
  transform: rotateX(var(--rx,0)) rotateY(var(--ry,0));
  box-shadow: 0 15px 30px rgba(0,0,0,0.18);
}

/* JS (keep simple) */const card = document.querySelector('.tilt-card');
card.parentElement.addEventListener('mousemove', e => {
  const rect = card.getBoundingClientRect();
  const x = (e.clientX - rect.left) / rect.width;
  const y = (e.clientY - rect.top) / rect.height;
  const rx = (y - 0.5) * -12; // rotateX
  const ry = (x - 0.5) * 12;  // rotateY
  card.style.setProperty('--rx', rx + 'deg');
  card.style.setProperty('--ry', ry + 'deg');
});
card.parentElement.addEventListener('mouseleave', () => {
  card.style.setProperty('--rx', '0');
  card.style.setProperty('--ry', '0');
});

در این نمونه از متغیرهای CSS (--rx و --ry) برای اعمال transform استفاده شده و JavaScript مقادیر را بر اساس موقعیت ماوس تنظیم می‌کند تا حرکت طبیعی و پیوسته ایجاد شود. هنگام خارج شدن ماوس، مقادیر به صفر برمی‌گردند. این روش کارآمد است چون recalculation محدود به تغییرات inline CSS است.

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

• برای روانی انیمیشن از transform و opacity استفاده کنید؛ تغییرات layout را (مثل width/height) اجتناب کنید.
• به جای مقدارهای خیلی سنگین برای shadow و blur از سایه‌های ساده‌تر استفاده کنید تا GPU سریع‌تر عمل کند.
• در موبایل که پرسپکتیو و hover ماهیت متفاوتی دارد، با media query افکت را ساده یا غیرفعال کنید.

دسترس‌پذیری (Accessibility)

• تلاش کنید افکت‌ها اطلاعات مفیدی ارائه دهند، نه فقط تزئینی. اگر تزئینی‌اند، role=”presentation” یا aria-hidden را مد نظر قرار دهید.
• برای کاربران کیبورد، رفتار hover را روی focus نیز اعمال کنید تا استفادهٔ صفحه‌کلید امکان‌پذیر باشد:

.card:focus{
  outline: none;
  transform: rotateX(8deg) rotateY(-10deg) translateZ(20px);
}

این کد ساده تضمین می‌کند که هنگام فوکوس با تب، همان افکت hover نیز اعمال شود و دسترسی افزایش یابد.

نمونهٔ کاربردها و ایده‌ها

• کارت‌های محصول در صفحهٔ فروشگاه برای برجسته‌سازی آیتم‌ها.
• دکمه‌های دعوت به اقدام (CTA) با عمق بیشتر برای جلب توجه.
• گالری تصاویر که هنگام hover تصویر جلو می‌آید و احساس سه‌بعدی می‌دهد.

جدول خواص مهم CSS برای افکت‌های سه‌بعدی

جمع‌بندی و نکات پایانی

با ترکیب صحیح perspective، transform و box-shadow می‌توانید افکت‌های سه‌بعدی جذابی بسازید که تجربهٔ کاربری را ارتقا دهند. برای تعاملات پیچیده‌تر از متغیرهای CSS و اسکریپت ساده استفاده کنید تا حرکات بر اساس مکان ماوس باشند. همیشه عملکرد و دسترس‌پذیری را در نظر بگیرید تا افکت‌ها به تجربهٔ کلی وب‌سایت کمک کنند و مزاحم آن نشوند.

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

ارسال