تحويلات 3D CSS
- الصفحة السابقة تحويلات 2D CSS
- الصفحة التالية انتقالات CSS
تحويلات 3D CSS
CSS يدعم التحويلات 3D.
يرجى وضع فأرةك فوق العناصر التالية لرؤية الفرق بين التحويلات 2D و 3D:
2D rotate
2D rotate
3D rotate
transform
في هذا الفصل، ستتعلم عن الصفات التالية لـ CSS:
دعم المتصفح
| الصفة | الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الصفة بشكل كامل. | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
طريقة التحويل الثلاثي الأبعاد CSS
باستخدام CSS transform الصفة، يمكنك استخدام الطرق التالية للتحويل الثلاثي الأبعاد:
rotateX()rotateY()rotateZ()
دالة rotateX()
rotateX() الطريقة التي تجعل العنصر يلتوي حول محور X بناءً على زاوية معينة:
مثال
#myDiv {
transform: rotateX(150deg);
}
دالة rotateY()
rotateY() الطريقة التي تجعل العنصر يلتوي حول محور Y بناءً على زاوية معينة:
مثال
#myDiv {
transform: rotateY(130deg);
}
دالة rotateZ()
rotateZ() الطريقة التي تجعل العنصر يلتوي حول محور Z بناءً على زاوية معينة:
مثال
#myDiv {
transform: rotateZ(90deg);
}
خصائص التحويل CSS
الجدول أدناه ي列 جميع خصائص التحويل الثلاثي الأبعاد:
| الصفة | وصف |
|---|---|
| transform | تطبيق تحويل ثنائي الأبعاد أو ثلاثي الأبعاد على العنصر. |
| transform-origin | يسمح لك بتغيير موقع العنصر المُحوّل. |
| transform-style | تحديد كيفية عرض العناصر المدمجة في الفضاء الثلاثي الأبعاد. |
| perspective | تحديد تأثير التلويح الثلاثي الأبعاد للعنصر. |
| perspective-origin | تحديد موقع القاعدة للعنصر الثلاثي الأبعاد. |
| backface-visibility | تحديد ما إذا كان العنصر مرئيًا عندما لا يكون مواجهًا للشاشة. |
طريقة التحويل الثلاثي الأبعاد CSS
| دالة | وصف |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
تعريف التحويل الثلاثي الأبعاد، باستخدام مصفوفة 4x4 تحتوي على 16 قيمة. |
| translate3d(x,y,z) | تعريف التحويل الثلاثي الأبعاد. |
| translateX(x) | تعريف التحويل الثلاثي الأبعاد، باستخدام قيم محور X فقط. |
| translateY(y) | تعريف التحويل الثلاثي الأبعاد، باستخدام قيم محور Y فقط. |
| translateZ(z) | تعريف التحويل الثلاثي الأبعاد، باستخدام قيم محور Z فقط. |
| scale3d(x,y,z) | تعريف التحويل التدرجي الثلاثي الأبعاد. |
| scaleX(x) | تعريف التحويل التدرجي الثلاثي الأبعاد، من خلال إعطاء قيمة محور X. |
| scaleY(y) | تعريف التحويل التدرجي الثلاثي الأبعاد، من خلال إعطاء قيمة محور Y. |
| scaleZ(z) | تعريف التحويل التدرجي الثلاثي الأبعاد، من خلال إعطاء قيمة محور Z. |
| rotate3d(x,y,z,زاوية) | تحديد دوران 3D. |
| rotateX(زاوية) | تحديد دوران 3D على محور X. |
| rotateY(زاوية) | تحديد دوران 3D على محور Y. |
| rotateZ(زاوية) | تحديد دوران 3D على محور Z. |
| perspective(n) | تحديد رؤية التمييز 3D لعدة عناصر. |
- الصفحة السابقة تحويلات 2D CSS
- الصفحة التالية انتقالات CSS
