خاصية تحويل CSS
مثال
قم بتدوير وإمالة وقياس ثلاثة عناصر <div> مختلفة:
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}
التعريف والاستخدام
تقوم transform
الخاصية بتطبيق تحويل ثنائي الأبعاد أو ثلاثي الأبعاد على عنصر. تتيح لك هذه الخاصية تدوير العناصر وقياسها ونقلها وإمالتها وما إلى ذلك.
لفهم خاصية التحويل بشكل أفضل ، قم بعرض العرض التوضيحي .
القيمة الافتراضية: | لا أحد |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.transform = "استدارة (7 درجة)" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
بناء الجملة
transform: none|transform-functions|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
none | Defines that there should be no transformation | |
matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values | |
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values | |
translate(x,y) | Defines a 2D translation | |
translate3d(x,y,z) | Defines a 3D translation | |
translateX(x) | Defines a translation, using only the value for the X-axis | |
translateY(y) | Defines a translation, using only the value for the Y-axis | |
translateZ(z) | Defines a 3D translation, using only the value for the Z-axis | |
scale(x,y) | Defines a 2D scale transformation | |
scale3d(x,y,z) | Defines a 3D scale transformation | |
scaleX(x) | Defines a scale transformation by giving a value for the X-axis | |
scaleY(y) | Defines a scale transformation by giving a value for the Y-axis | |
scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis | |
rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter | |
rotate3d(x,y,z,angle) | Defines a 3D rotation | |
rotateX(angle) | Defines a 3D rotation along the X-axis | |
rotateY(angle) | Defines a 3D rotation along the Y-axis | |
rotateZ(angle) | Defines a 3D rotation along the Z-axis | |
skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis | |
skewX(angle) | Defines a 2D skew transformation along the X-axis | |
skewY(angle) | Defines a 2D skew transformation along the Y-axis | |
perspective(n) | Defines a perspective view for a 3D transformed element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
هذا المثال كيفية إنشاء صور "بولارويد" وتدوير الصور.
الصفحات ذات الصلة
دروس CSS: تحويلات CSS 2D
برنامج CSS التعليمي: CSS 3D Transforms
مرجع DOM HTML: تحويل الخاصية