وصف الدورة التدريبية:

وظيفة rotate3d() في CSS

التعريف والاستخدام rotate3d() CSS

rotate3d() تعريف وظيفة الدوران الثلاثي الأبعاد للعنصر. transform في استخدام الخاصية.

مثال

مثال 1

استخدام rotate3d() تدوير عدة عناصر <div>:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

تجربة شخصية

مثال 2

استخدام rotate3d() تدوير الصورة:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

تجربة شخصية

النصائح CSS

rotate3d(x, y, z, angle,

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل.

الصفحات ذات الصلة

دليل:تحويلات CSS 3D

المرجع:خصائص transform CSS

المرجع:خصائص rotate CSS

المرجع:دالة rotate() CSS

المرجع:دالة rotateX() CSS

المرجع:دالة rotateY() CSS

المرجع:دالة rotateZ() CSS