54- تحويلات ثلاثية الأبعاد في CSS (CSS 3D Transforms)

يدعم CSS أيضًا التحويلات ثلاثية الأبعاد (3D).

دوران ثنائي الأبعاد دوران ثلاثي الأبعاد

في هذا الفصل، ستتعلم عن خاصية CSS التالية:

transform

دعم المتصفحات

تشير الأرقام في الجدول إلى إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

طرق تحويلات ثلاثية الأبعاد في CSS

باستخدام خاصية transform في CSS، يمكنك استخدام طرق التحويل ثلاثية الأبعاد التالية:

• rotateX()
• rotateY()
• rotateZ()

طريقة rotateX()

تقوم طريقة rotateX() بتدوير عنصر حول محوره X بزاوية معينة:

مثال:

#myDiv {
  transform: rotateX(150deg);
}

طريقة rotateY()

تقوم طريقة rotateY() بتدوير عنصر حول محوره Y بزاوية معينة:

مثال:

#myDiv {
  transform: rotateY(150deg);
}

طريقة rotateZ()

تقوم طريقة rotateZ() بتدوير عنصر حول محوره Z بزاوية معينة:

مثال:

#myDiv {
  transform: rotateZ(90deg);
}