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

ما هي التحولات ثلاثية الأبعاد؟

تتيح لك التحويلات ثلاثية الأبعاد نقل العناصر وتدويرها وقياسها في مساحة ثلاثية الأبعاد. على عكس التحويلات ثنائية الأبعاد، التي تسمح لك فقط بمعالجة العناصر على طول المحورين X وY، تضيف التحويلات ثلاثية الأبعاد المحور Z، مما يوفر عمقًا لعناصرك.

التحولات الأساسية ثلاثية الأبعاد

1. تدوير صورة ثلاثية الأبعاد

تدوير الصورة في مساحة ثلاثية الأبعاد يمكن أن يمنحها مظهرًا أكثر ديناميكية. هيريس كيفية القيام بذلك:

.rotate-3d {
  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
  transition: transform 0.5s;
}

.rotate-3d:hover {
  transform: rotateX(0) rotateY(0) rotateZ(0);
}

2. ترجمة ثلاثية الأبعاد

يمكن أن يؤدي تحريك عنصر على طول المحور Z إلى خلق وهم العمق.

.translate-3d {
  transform: translateZ(50px);
  transition: transform 0.5s;
}

.translate-3d:hover {
  transform: translateZ(0);
}

3. مقياس ثلاثي الأبعاد

قد يؤدي تغيير حجم الصورة بالأبعاد الثلاثية إلى ظهورها كما لو كانت تقترب أو تبتعد.

.scale-3d {
  transform: scale3d(1.2, 1.2, 1.2);
  transition: transform 0.5s;
}

.scale-3d:hover {
  transform: scale3d(1, 1, 1);
}

الجمع بين التحولات ثلاثية الأبعاد

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

.combined-3d {
  transform: rotateY(45deg) translateZ(50px);
  transition: transform 0.5s;
}

.combined-3d:hover {
  transform: rotateY(0) translateZ(0);
}

إضافة المنظور

لتعزيز التأثير ثلاثي الأبعاد، يمكنك إضافة منظور إلى العناصر الخاصة بك. يتحكم المنظور في شدة التأثير ثلاثي الأبعاد من خلال تحديد كيفية عرض المحور Z.

.container {
  perspective: 1000px;
}

.perspective-3d {
  transform: rotateY(45deg);
  transition: transform 0.5s;
}

.perspective-3d:hover {
  transform: rotateY(0);
}

التحولات ثلاثية الأبعاد التفاعلية مع جافا سكريبت

لمزيد من التفاعلات المتقدمة، يمكنك استخدام JavaScript للتحكم في التحويلات ثلاثية الأبعاد. يتيح لك هذا إنشاء تأثيرات تستجيب لإجراءات المستخدم، مثل حركات الماوس.

.interactive-3d {
  transition: transform 0.1s;
}

.container {
  perspective: 1000px;
}

const interactive3d = document.querySelector('.interactive-3d');

document.addEventListener('mousemove', (e) => {
  const x = (window.innerWidth / 2 - e.pageX) / 20;
  const y = (window.innerHeight / 2 - e.pageY) / 20;

  interactive3d.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
});

خاتمة

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