<div class="radikalwp-hov-tilt"><div class="radikalwp-hov-tilt-card"><span class="radikalwp-hov-tilt-badge">جدید<//span><h3 class="radikalwp-hov-tilt-title">هدستفون حرفهای<//h3><p class="radikalwp-hov-tilt-price">۲,۹۸۰,۰۰۰ تومان<//p><//div><//div>
.radikalwp-hov-tilt { perspective: 700px; max-width: 260px; }
.radikalwp-hov-tilt-card {
position: relative;
padding: 34px 26px;
text-align: center;
background: linear-gradient(135deg, #1e293b, #334155);
border-radius: 20px;
transform-style: preserve-3d;
transition: transform .45s cubic-bezier(.2, .8, .3, 1), box-shadow .45s ease;
cursor: pointer;
}
.radikalwp-hov-tilt-card:hover {
transform: rotateX(7deg) rotateY(-9deg) translateY(-4px);
box-shadow: -18px 22px 40px rgba(15, 23, 42, .35);
}
.radikalwp-hov-tilt-badge {
position: absolute;
top: 14px;
right: 14px;
padding: 5px 12px;
font-size: 10.5px;
font-weight: 800;
color: #0f172a;
background: #7dd3fc;
border-radius: 999px;
transform: translateZ(30px);
}
.radikalwp-hov-tilt-title {
margin: 0 0 10px;
font-size: 17px;
font-weight: 800;
color: #fff;
transform: translateZ(24px);
}
.radikalwp-hov-tilt-price {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #93c5fd;
transform: translateZ(16px);
}
درباره این اسنیپت
کارتی که در هاور حول محورهای X و Y کمی متمایل میشود و حس کج شدن فیزیکی کارت میدهد؛ بدون JS و با perspective ثابت. زاویه کم عمدی است تا متن خوانا بماند و فقط حس حجم منتقل شود. برای کارتهای قیمت، معرفی محصول و دستههای ویژه مناسب است. گرادیان پسزمینه کارت هم با تیلت جابهجایی نور میسازد.
پرسشهای متداول
transform: translateZ عناصر را از سطح کارت جلو میآورد و با perspective والد، عمق واقعی میسازد؛ بج بیشتر از متن بیرون زده است.
مقادیر rotateX و rotateY را افزایش دهید؛ بالای 12 درجه متنها تار و غیرحرفهای دیده میشوند، احتیاط کنید.
وقتی کارت به چپ میچرخد، نور فرضی از راست میتابد و سایه سمت چپ میافتد؛ همان زبان نور واقعی دنیا.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
هاور چرخش سهبعدی کارت
هاور چرخش آیکون دکمه
پکیج ابزارهای حرفهای
مجموعه کامل افزونهها و اسنیپتهای آماده برای راهاندازی سریع سایت.
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!