پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-tilt-card"><span class="radikalwp-tilt-badge">ویژه<//span><h4>پکیج ابزارهای حرفه‌ای<//h4><p>مجموعه کامل افزونه‌ها و اسنیپت‌های آماده برای راه‌اندازی سریع سایت.<//p><//div>
.radikalwp-tilt-card {
  width: 260px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.radikalwp-tilt-card:hover {
  transform: perspective(800px) rotateX(8deg) rotateY(-8deg) translateY(-4px);
  box-shadow: -18px 24px 40px rgba(79, 70, 229, .18);
}
.radikalwp-tilt-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6d28d9;
  background: #f3e8ff;
  border-radius: 999px;
}
.radikalwp-tilt-card h4 { margin: 0 0 8px; font-size: 16px; color: #0f172a; }
.radikalwp-tilt-card p { margin: 0; font-size: 12.5px; color: #64748b; line-height: 2; }

درباره این اسنیپت

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

پرسش‌های متداول

علامت مقادیر rotateX و rotateY در hover را تغییر دهید تا کارت از سمت دیگر بچرخد و سایه جابه‌جا شود.

بله؛ چند کارت را در گرید بچینید. افکت روی هر کارت مستقل اجرا می‌شود و با هم تداخل نمی‌کنند.

رنگ و فاصله box-shadow حالت hover را ملایم‌تر کنید تا عمق کمتر و ظریف‌تری بسازد.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پکیج طلایی
پیش‌نمایش زنده اسنیپت

هاور چرخش سه‌بعدی کارت

هاور سه‌بعدی تیلت
۱۰۰
۴.۲ (۱۶)
جدید

هدست‌فون حرفه‌ای

۲,۹۸۰,۰۰۰ تومان

پیش‌نمایش زنده اسنیپت

هاور چرخش ملایم سه‌بعدی

هاور سه‌بعدی چرخش
۶۵
۴.۱ (۱۰)

دوره پیشرفته CSS

با افکت‌های مدرن، انیمیشن‌های GPU و معماری استایل مقیاس‌پذیر آشنا شوید.

جزئیات دوره ←
پیش‌نمایش زنده اسنیپت

هاور بلندشدن سایه‌دار

هاور سایه کارت
۲۲
۴.۹ (۳)