کد رایگان کارت‌های محصول 3D با افکت چرخش برای وبسایت| HTML, CSS, JS

Q: فهرست مطالب

این مقاله شامل موضوعات مختلفی در مورد طراحی سایت فروشگاهی است که در بخشهای مختلف توضیح داده شده است.

آیا می‌خواهید محصولات سایتتان به صورت جذاب و سه‌بعدی نمایش داده شوند؟ با این کد رایگان کارت‌های محصول 3D، بازدیدکنندگان شما شگفت‌زده خواهند شد. در این پست تمام جزئیات نحوه استفاده، شخصی‌سازی و افزودن افکت چرخش سه‌بعدی را خواهید دید.

نتیجه نهایی که بدست می آورید:

روی کارت ها کلیک کنید:)

3D Product Cards

01 SNEAKERS

BARANG

02 SNEAKERS

BARANG

معرفی کارت محصولات سه بعدی

کارت‌های محصول سه‌بعدی یکی از جذاب‌ترین روش‌ها برای نمایش محصولات در سایت‌های فروشگاهی و پورتفولیو هستند. این کارت‌ها با افکت چرخش و درخشش، تجربه کاربری شما را به سطح جدیدی می‌برند. در این پست یک کد رایگان HTML, CSS و JS آماده شده که شما می‌توانید به راحتی در سایت خود استفاده کنید.

html

				
					<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8" />
  <title>3D Product Cards</title>

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

  <div class="container">

    <!-- Card 1 -->
    <div class="card blue">
      <div class="product">
        <span class="number">01</span>
        <span class="sneakers">SNEAKERS</span>
        <img decoding="async" src="your image.png" alt="Nike Blue">
      </div>
      <div class="title">
        <h2 id="toc-4">WPamooz</h2>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="card purple">
      <div class="product">
        <span class="number">02</span>
        <span class="sneakers">SNEAKERS</span>
        <img decoding="async" src="your image.png" alt="Nike Purple">
      </div>
      <div class="title">
        <h2 id="toc-4">WPamooz</h2>
      </div>
    </div>

  </div>

</body>
</html>

css

				
					.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

/* ===== Card ===== */
.card {
  width: 220px;
  height: 340px;
  border-radius: 12px;
  transform-style: preserve-3d;
}

.card.blue {
  background: linear-gradient(135deg, #09AFFF, #125575);
}

.card.purple {
  background: linear-gradient(135deg, #5911F2, #290987);
}

/* ===== Product ===== */
.product {
  height: 85%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.number {
  font-size: 80px;
  line-height: 80px;
  font-style: italic;
  font-weight: 1000;
  opacity: 0.25;
  color: #fff;
}

.sneakers {
  font-size: 35px;
  line-height: 35px;
  font-style: italic;
  opacity: 0.7;
  color: #fff;
}

.product img {
  width: 100%;
  position: absolute;
  bottom: -10px;
  right: -40px;
  transform: translateZ(60px);
  margin-left: 200px!important;
}

/* ===== Title ===== */
.title {
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

js

				
					<!-- Vanilla Tilt CDN -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>

<script>
  VanillaTilt.init(document.querySelectorAll(".card"), {
    max: 25,
    speed: 5000,
    glare: true,
    "max-glare": 100,
  });
</script>

ویژگی های کدهای ارائه شده

این کارت‌ها با ترکیب CSS3 برای طراحی، HTML برای ساختار و JavaScript برای افکت‌های چرخش و درخشش ایجاد شده‌اند.
ویژگی‌های مهم:

طراحی سه‌بعدی واقعی با transform-style: preserve-3d
افکت چرخش جذاب با کتابخانه Vanilla Tilt
قابلیت شخصی‌سازی رنگ، تصویر و متن هر کارت
سازگار با فونت‌های گوگل برای ظاهری حرفه‌ای

مزایا استفاده از این کارت ها

جذب بیشتر بازدیدکننده: کارت‌های سه‌بعدی تجربه بصری جذابی ایجاد می‌کنند.
ساده و رایگان: بدون نیاز به پلاگین‌های پیچیده یا پرداخت هزینه.
قابل شخصی‌سازی: رنگ، فونت، تصویر و متن کارت‌ها را می‌توانید تغییر دهید.
سازگار با موبایل و دسکتاپ: طراحی انعطاف‌پذیر و واکنش‌گرا با CSS Flexbox.

راهنمای کامل استفاده و شخصی‌سازی کد

اضافه کردن کارت جدید:
برای اضافه کردن کارت جدید، کافیست یک <div class="card"> جدید درون <div class="container"> ایجاد کنید.
تغییر رنگ کارت:
کلاس‌های blue و purple قابل تغییر هستند یا می‌توانید کلاس جدید با گرادیانت دلخواه بسازید:

				
					.card.red {
  background: linear-gradient(135deg, #FF4D4D, #990000);
}

تغییر شماره و متن محصول:
- شماره کارت: <span class="number">03</span>
- نام محصول: <span class="sneakers">SHOES</span>
تغییر تصویر محصول:
تنها کافیست src تصویر را تغییر دهید:

				
					<img decoding="async" src="آدرس-تصویر-جدید.png" alt="نام محصول">

تغییر عنوان کارت:
در بخش <div class="title"><h2>BARANG</h2></div> متن دلخواه خود را قرار دهید.
شخصی‌سازی افکت Tilt:
تنظیمات کتابخانه Vanilla Tilt را می‌توان تغییر داد:

				
					VanillaTilt.init(document.querySelectorAll(".card"), {
  max: 30,       // بیشترین زاویه چرخش
  speed: 4000,   // سرعت افکت
  glare: true,   // فعال کردن افکت درخشش
  "max-glare": 80 // شدت درخشش
});

فونت و ظاهر متن:
فونت‌های گوگل را می‌توانید تغییر دهید و رنگ متن‌ها در CSS قابل شخصی‌سازی است.
نکات اضافی:
- برای واکنش‌گرایی بهتر، می‌توانید از @media queries استفاده کنید.
- اضافه کردن انیمیشن‌های CSS به متن یا تصویر کارت، جذابیت بیشتری ایجاد می‌کند.

Post Views: 32