CSS3 التحويلات 3D
CSS3 يسمح لك لتهيئة العناصر باستخدام التحولات 3D.
الماوس فوق العناصر الواردة أدناه لمعرفة الفرق بين 2D و 3D التحول:
2D تدوير
3D تدوير
المتصفح دعم التحويلات 3D
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-, -moz- ، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 التحويلات 3D
في هذا الفصل سوف تتعلم عن طرق التحويل 3D التالية:
-
rotateX() -
rotateY() -
rotateZ()
و rotateX() الطريقة
و rotateX() طريقة يدور عنصرا حول محور X له عند درجة معينة:
مثال
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
انها محاولة لنفسك » و rotateY() الطريقة
و rotateY() طريقة يدور حول عنصر Y-محورها في درجة معينة:
مثال
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
انها محاولة لنفسك » و rotateZ() الطريقة
و rotateZ() طريقة يدور عنصرا حول محور Z لها في درجة معينة:
مثال
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »
CSS3 تحويل خصائص
يسرد الجدول التالي كافة 3D تحويل الخصائص:
| الملكية | وصف |
|---|---|
| transform | وينطبق هذا التحول 2D أو 3D إلى عنصر |
| transform-origin | يسمح لك بتغيير موقفها من العناصر حولت |
| transform-style | تحدد كيفية عناصر متداخلة يتم تقديمها في الفضاء 3D |
| perspective | يحدد وجهة نظر حول كيفية عناصر 3D ينظر |
| perspective-origin | يحدد الموقف السفلي من عناصر 3D |
| backface-visibility | يحدد ما إذا كان عنصر يجب أن يكون مرئيا عندما لا تواجه الشاشة |
3D تحويل طرق
| وظيفة | وصف |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | تعرف تحولا 3D، وذلك باستخدام مصفوفة 4X4 من قيم 16 |
| translate3d(x,y,z) | تعرف ترجمة 3D |
| translateX(x) | تعرف ترجمة 3D، وذلك باستخدام فقط قيمة للمحور X |
| translateY(y) | تعرف ترجمة 3D، فقط باستخدام قيمة للالعمودي |
| translateZ(z) | تعرف ترجمة 3D، وذلك باستخدام فقط قيمة لمحور Z |
| scale3d(x,y,z) | يحدد التحول على نطاق 3D |
| scaleX(x) | يحدد التحول على نطاق 3D عن طريق إعطاء قيمة للمحور X |
| scaleY(y) | يحدد التحول على نطاق 3D عن طريق إعطاء قيمة للالعمودي |
| scaleZ(z) | يحدد التحول على نطاق 3D عن طريق إعطاء قيمة للمحور Z |
| rotate3d(x,y,z,angle) | يعرف دوران 3D |
| rotateX(angle) | يعرف دوران 3D على طول محور X |
| rotateY(angle) | يعرف دوران 3D على طول المحور Y |
| rotateZ(angle) | يعرف دوران 3D على طول المحور Z |
| perspective(n) | تعرف وجهة نظر منظور لعنصر 3D تحويل |