تأثيرات ثلاثية الأبعاد (3D Effects) في CSS

تُعتبر التأثيرات ثلاثية الأبعاد (3D Effects) في CSS من الأدوات القوية التي تساعد المصممين على إضافة بُعد جديد إلى تصاميم المواقع، مما يجعل العناصر تبدو وكأنها تخرج عن الشاشة، مما يضيف عمقًا وتفاعلًا بصريًا مميزًا. من خلال استخدام خصائص مثل perspective و rotate3d، يمكن تحقيق هذا التأثير بشكل بسيط، دون الحاجة إلى مكتبات خارجية أو برمجيات معقدة. في هذا الدرس، سنتعرف على كيفية استخدام هذه الخصائص، مع تقديم أمثلة عملية لكل منها.

---

1. خاصية Perspective

خاصية perspective في CSS تعمل على إضافة عمق وهمي للعناصر، مما يجعلها تبدو وكأنها تتحرك في فضاء ثلاثي الأبعاد. هذه الخاصية تطبَّق على العنصر الحاوي (container) الذي يحتوي على العناصر التي سيتم تحويلها إلى ثلاثية الأبعاد.

كيفية استخدام Perspective

تُحدد قيمة perspective المسافة بين العنصر والكاميرا التخيلية التي تنظر إلى العنصر. فكلما كانت قيمة perspective أقل، بدا العنصر أقرب وأكثر تشويهًا، بينما تجعل القيم الأكبر العنصر يبدو مسطحًا وأكثر تباعدًا.

مثال على Perspective

HTML:

<div class="perspective-container">
    <div class="box">مربع ثلاثي الأبعاد</div>
</div>

CSS:

.perspective-container {
    perspective: 1000px; /* تحديد المسافة بين العنصر والكاميرا */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    transform: rotateX(45deg) rotateY(45deg); /* تدوير ثلاثي الأبعاد */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

تفسير الشيفرة

• perspective: 1000px: تحدد العمق أو المسافة بين العنصر والكاميرا. القيمة 1000px هنا تجعل التأثير ثلاثي الأبعاد واضحًا لكنه ليس مفرط التشويه.
• rotateX و rotateY: قمنا بتدوير العنصر حول المحاور السينية والصادية للحصول على تأثير ثلاثي الأبعاد.

---

2. خاصية Rotate3d

تُعد rotate3d إحدى أقوى خصائص CSS للتحكم في الدوران ثلاثي الأبعاد. فهي تتيح لك تدوير العنصر حول محور معين في الفضاء ثلاثي الأبعاد، مما يمنحك مرونةً أكبر في إنشاء تأثيرات بصرية جذابة.

الصيغة العامة لـ Rotate3d

transform: rotate3d(x, y, z, angle);

• x و y و z: قيم تحدد المحور الذي سيدور حوله العنصر. يمكن أن تكون القيم 0 أو 1. على سبيل المثال، إذا كانت القيمة (1, 0, 0) فالدوران سيكون حول المحور السيني X.
• angle: زاوية الدوران بوحدات الدرجات (deg).

مثال على Rotate3d

HTML:

<div class="rotate3d-box">دوران ثلاثي الأبعاد</div>

CSS:

.rotate3d-box {
    width: 150px;
    height: 150px;
    background-color: #FF5722;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate3d(1, 1, 0, 45deg); /* دوران حول محوري X و Y بزاوية 45 درجة */
    margin: 50px auto;
}

تفسير الشيفرة

• rotate3d(1, 1, 0, 45deg): هذه الخاصية تقوم بتدوير العنصر حول المحورين X و Y بزاوية 45 درجة. سيبدو العنصر وكأنه منحرف قليلًا في الفضاء، مما يضفي عليه تأثيرًا ثلاثي الأبعاد.

---

3. دمج Perspective مع Rotate3d

يمكنك دمج كل من perspective و rotate3d للحصول على تأثيرات ثلاثية الأبعاد أكثر واقعية وعمقًا.

مثال على دمج Perspective و Rotate3d

HTML:

<div class="combined-perspective">
    <div class="combined-box">تأثير ثلاثي الأبعاد مدمج</div>
</div>

CSS:

.combined-perspective {
    perspective: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.combined-box {
    width: 150px;
    height: 150px;
    background-color: #673AB7;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate3d(1, 1, 0, 60deg);
    transition: transform 0.5s ease-in-out;
}

.combined-box:hover {
    transform: rotate3d(1, 1, 0, 0deg);
}

تفسير الشيفرة

• perspective: 800px: أضفنا خاصية perspective إلى العنصر الحاوي لإعطاء العمق.
• transition: أضفنا انتقالًا سلسًا لجعل التأثير أكثر جاذبية عند تمرير المؤشر على العنصر.

---

4. إنشاء تأثيرات تفاعلية باستخدام Perspective و Rotate3d

بإمكانك أيضًا استخدام perspective و rotate3d معًا لإنشاء تأثيرات تفاعلية جذابة عند تمرير الماوس على العناصر أو عند حدوث أحداث أخرى، مما يضفي تفاعلاً ديناميكيًا على الصفحة.

مثال على تأثير ثلاثي الأبعاد تفاعلي

HTML:

<div class="interactive-3d">
    <div class="card">بطاقة تفاعلية</div>
</div>

CSS:

.interactive-3d {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.card {
    width: 200px;
    height: 300px;
    background-color: #009688;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 10px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.interactive-3d:hover .card {
    transform: rotate3d(1, 1, 0, 180deg);
}

تفسير الشيفرة

• transform-style: preserve-3d: تُحافظ على التأثير ثلاثي الأبعاد داخل العنصر عند تفعيله.
• hover: عندما يتم تمرير الماوس على العنصر، يدور بزاوية 180 درجة حول المحورين X و Y، مما يعطي تأثيرًا تفاعليًا وجذابًا.

---

خاتمة

يُعد استخدام التأثيرات ثلاثية الأبعاد في CSS وسيلة قوية لجعل العناصر أكثر جاذبية وتفاعلية. سواء كنت ترغب في إضافة عمق بسيط أو إنشاء تأثيرات معقدة، فإن perspective و rotate3d توفران لك الأدوات اللازمة لتحقيق ذلك. مع الممارسة، ستتمكن من إتقان هذه الخصائص واستخدامها في تحسين تجربة المستخدم وإضافة لمسات جمالية إلى تصميماتك.