5 ایده برتر طراحی وبسایت سه‌بعدی با CSS

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

5 ایده برتر طراحی وبسایت سه‌بعدی با CSS

1. انیمیشن چرخش سه‌بعدی کارت‌ها

یکی از ایده‌های محبوب در طراحی سه‌بعدی وب، استفاده از انیمیشن‌های چرخش کارت‌ها است. این روش در بخش‌های نمایش نمونه کارها، کارت‌های اطلاعاتی یا گالری‌های تصویری بسیار مفید است. با استفاده از ویژگی transform: rotateY(180deg); در  CSS، می‌توان جلوه‌ای از چرخش واقعی ایجاد کرد.

<div class="card">
  <div class="card-inner">
    <div class="card-front">روی کارت</div>
    <div class="card-back">پشت کارت</div>
  </div>
</div>

<style>

  .card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
  }
  .card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }

  .card:hover .card-inner {
    transform: rotateY(180deg);
  }

  .card-front,
  .card-back {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: 15px;
    background-color: green;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  .card-back {
    transform: rotateY(180deg);
    background-color: #4789ca;
  }

</style>

2. ایجاد منوهای سه‌بعدی تعاملی

منوهای سه‌بعدی یکی از راه‌های جذاب برای ایجاد تجربه‌ای پویا در وبسایت هستند. همیشه ایجاد ظاهر جذاب و گیرا در کنار کارایی ، می‌تواند موجب جذب کاربران و افزایش بازدید وبسایت شود. استفاده از perspective  و transform-style: preserve-3d; باعث می‌شود که کاربران احساس عمق بیشتری در هنگام تعامل با منو داشته باشند.

توجه داشته باشید در طراحی وب ، زمانی که قرار است از انیمیشن ها برای جذابیت طراح استفاده کنید ، رعایت مقدار انیمیشن ها بسیار مهم می‌باشد ، همیشه استفاده‌ی زیاد از انیمیشن های پیچیده و طولانی ، جذاب نیستند ، بلکه توازن بین انیمیشن های ساده تر (minimal design) در کنار یک انیمیشن پیچیده ، می‌تواند باعث حسی متفاوت و بدور از خستگی ، به کاربران شما هدیه دهد.

<nav>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Contact</li>
  </ul>
</nav>

<style>

  nav {
    perspective: 800px;
  }

  .menu {
    display: flex;
    list-style: none;
  }

  .menu li {
    margin: 0 15px;
    transition: transform 0.3s;
    cursor: pointer;
  }

  .menu li:hover {
    transform: rotateX(15deg) rotateY(20deg);
  }
</style>

3. گالری تصاویر با جلوه پرسپکتیو

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

<div class="gallery">
  <img
    src="./image.webp"
    class="image"
  />

  <img
    src="./image.webp"
    class="image"
  />

  <img
    src="./image.webp"
    class="image"
  />
</div>

<style>

  .gallery {
    display: flex;
    perspective: 1200px;
  }

  .image {
    cursor: pointer;
    width: 200px;
    height: 200px;
    margin: 10px;
    transition: transform 0.5s;
    object-fit: cover;
    object-position: top;
    box-shadow: 0 0 14px #0a0a0a2d;
    border-radius: 15px;
  }

  .image:hover {
    transform: translateZ(50px) rotateY(20deg) scale(1.05);
  }

</style>

4. ساخت دکمه‌های سه‌بعدی واقع‌گرایانه

دکمه‌های سه‌بعدی باعث می‌شوند که رابط کاربری سایت طبیعی‌تر و ملموس‌تر به نظر برسد. با استفاده از سایه‌ها  (box-shadow)، گرادینت‌ها (linear-gradient) و تغییرات موقعیت transform: scale(0.9); هنگام کلیک، می‌توان دکمه‌هایی طراحی کرد که حس عمق و فشار را تداعی کنند.

<button class="button">Click Me</button>

<style>

  .button {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    padding: 15px 30px;
    border: none;
    color: white;
    font-size: 16px;
    box-shadow: 0px 5px 10px #ff416d54;
    transition: all 0.2s;
    border-radius: 3px;
    cursor: pointer;
  }

  .button:active {
    box-shadow: 0px 3px 5px #ff416d54;
    transform: scale(0.9);
  }

</style>

نکته مهمی که وجود دارد ، رعایت میزان تکرار و استفاده از این قبیل دکمه ها درون وبسایت است ، امروزه در طراحی سایت ، استفاده مکرر از دکمه های این چنینی توصیه نمی‌شود ، اما در صورتی که در بخش های خاص برای جلب توجه و کلیک کاربر از آنها استفاده شود می‌تواند بسیار کاربردی بوده و در زیبایی سایت شما، بسیار مؤثر باشد.

5. پس‌زمینه‌های پویا و متحرک سه‌بعدی

پس‌زمینه‌های سه‌بعدی متحرک می‌توانند تجربه بصری منحصر به فردی را به کاربران ارائه دهند. با استفاده از ترکیب@keyframes  و transform: rotateX() rotateY(); می‌توان افکت‌هایی مانند کهکشان، امواج یا انیمیشن‌های جذاب دیگر ایجاد کرد که ظاهر سایت را حرفه‌ای‌تر جلوه دهد.

<div class="background"></div>

<style>

  @keyframes rotateBackground {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }

    25%,
    75% {
      opacity: 0.1;
    }

    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }

  body {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .background {
    border-radius: 100vh;
    aspect-ratio: 1/1;
    height: 100vh;
    background: radial-gradient(circle, #2a5298aa, #1e3c720a, #00000000);
    filter: blur(14px);
    animation: rotateBackground 10s infinite linear;
  }

</style>

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

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

در این موارد استفاده از کتابخانه های پردازش 3D به شما پیشنهاد می‌شود ، کتابخانه هایی مانند three.js که در این خصوص می‌تواند تمامی نیاز های شما را برطرف کند و یک وبسایت سه بعدی خارق‌العاده پیاده سازی کنید.

نتیجه‌گیری

طراحی سه‌بعدی با CSS امکانات جذابی را برای طراحان وب فراهم می‌کند. این تکنیک‌ها می‌توانند باعث افزایش تعامل کاربران با سایت شوند و تجربه کاربری را بهبود ببخشند. با استفاده از روش‌های مطرح‌شده، می‌توان وبسایتی مدرن و منحصر به فرد ایجاد کرد که توجه کاربران را جلب کند. به علاوه، با ترکیب این روش‌ها و استفاده از انیمیشن‌های جذاب، می‌توان تجربه کاربری را به سطح بالاتری برد.