پکیج طلایی
هاور چرخش سهبعدی کارت
هاور
سهبعدی
تیلت
۱۰۰
۴.۲ (۱۶)
<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 را ملایمتر کنید تا عمق کمتر و ظریفتری بسازد.
میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید
۲,۹۸۰,۰۰۰ تومان
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!