پیشنمایش زنده (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 و معماری استایل مقیاسپذیر آشنا شوید.
جزئیات دوره ←هاور بلندشدن سایهدار
هاور
سایه
کارت
۲۲
۴.۹ (۳)
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!