CSS

CSS 3D Transforms
تحويل العنصر إلي ثلاثي ابعاد في لغة CSS

سوف تتعلم في هذا الدرس تحويل العناصر من عناصر عادية إلي عناصر ثلاثية الأبعاد في لغة CSS.

التاريخ

29 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1627

المواضيع

24
الشروحات chevron_left CSS 3D Transforms chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS 3D Transforms
تحويل العنصر إلي ثلاثي ابعاد في لغة CSS

</> CSS 3D Transforms
تحويل العنصر إلي ثلاثي ابعاد في لغة CSS

تستخدم خاصية transform في تحويل العناصر إلي عناصر 3D ثلاثية الأبعاد يمكن استخدامها في عمل [rotate] [تدوير] في لغة CSS.


الدوال التي تستخدم مع خاصية transform لعمل 3D: 

  • ( )rotaxtex تتحكم في تدوير العنصر حول محور X الخاص به بدرجات محددة.
  • ( )rotaxtey تتحكم في تدوير العنصر حول محور Y الخاص به بدرجات محددة.
  • ( )rotateZ تحكم في تدوير العنصر حول محور Z بدرجات محددة.
CSS transform syntax

طريقة كتابة خاصية transform في لغة CSS.

transform:value;
CSS transform values

قيم خاصة transform في لغة CSS.

transform:none|transform-functions|initial|inherit;

</> CSS transform none
خاصية transform مع القيمة none ف لغة CSS

تستخدم خاصية transform مع القيمة none ليبقي العنصر بوضعة الحالي بدون أي دوران في لغة CSS.

CSS transform none

خاصية transform مع القيمة none في لغة CSS.

.transform
{
  transform: none;
}

</> CSS transform rotateX
خاصية transform مع القيمة rotateX ف لغة CSS

تستخدم خاصية transform مع القيمة rotateX للتحكم في تدوير العنصر حول محور X الخاص به بدرجات محددة في لغة CSS.

CSS transform rotateX

خاصية transform مع القيمة rotateX في لغة CSS.

.transform
{
  transform: rotateX(150deg);
}

</> CSS transform rotateY
خاصية transform مع القيمة rotateY ف لغة CSS

تستخدم خاصية transform مع القيمة rotateY للتحكم في تدوير العنصر حول محور Y الخاص به بدرجات محددة في لغة CSS.

CSS transform rotateY

خاصية transform مع القيمة rotateY في لغة CSS.

.transform
{
  transform: rotateY(150deg);
}

</> CSS transform rotateZ
خاصية transform مع القيمة rotateZ ف لغة CSS

تستخدم خاصية transform مع القيمة rotateY للتحكم في تدوير العنصر حول محور Y الخاص به بدرجات محددة في لغة CSS.

CSS transform rotateZ

خاصية transform مع القيمة rotateZ في لغة CSS.

.transform
{
  transform: rotateZ(150deg);
}
مصطلحات الدرس
Transformation
Transformation

تحولات

Rotaxte-X
Rotaxte-X

تدوير أفقي

Rotaxte-Y
Rotaxte-Y

تدوير عامودي

Rotate-Z
Rotate-Z

تدوير حول المحور Z

Method
Method

طريقة

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.