دليل مرجع CSS

قواعد CSS @

دليل الخصائص الكاملة لـ CSS

خصائص transform-origin في CSS3 خصائص top في CSS

طريقة استخدام خصائص CSS3 التحويل و أمثلة

تطبيق خصائص CSS التحويل لتحويل 2D أو 3D للعناصر. يسمح لك هذا الخصائص بتحويل العناصر بثني، تقليل، تحريك، إمالة، تحريك، ثني، تقليل، إلخ في الفضاء الثنائي أو الثلاثي الأبعاد.

The following table describes the usage and version history of this property, as well as the syntax of its use in JavaScript scripts.

Default value:	none
Applicable to:	Transformable elements
Inheritance:	No
Animated:	Yes.Please refer to Animation properties.
Version:	CSS3 new feature
JavaScript syntax:	object.style.transform="rotate(7deg)"

استخدام خاصية transform

يُكون بناءً على النحو التالي لهذه الخاصية:

transform:　[　transform-function　]　1　or　more　values　|　none　|　initial　|　inherit

يُظهر المثال أدناه كيفية استخدام خاصية transform.

النموذج

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

الاختبار‹/›

قيمة الخاصية

يُبين الجدول أدناه القيم لهذه الخاصية.

القيمة	الوصف
translate(tx,ty)	تحريك العنصر حول محاور X وY بمقدار معين.
translate3d(tx,ty,tz)	تحريك العنصر حول محاور X،Y وZ بمقدار معين.
translateX(tx)	تحريك العنصر حول محور X بمقدار معين.
translateY(ty)	تحريك العنصر حول محور Y بمقدار معين.
translateZ(tz)	تحريك العنصر حول محور Z بمقدار معين.
rotate(a)	يُحدد العنصر حول نقطة البداية للعنصر المحددة بزاوية معينة بناءً على خاصية transform-origin.
rotate3d(x,y,z, a)	تحويل العنصر حول اتجاه المتجه [x،y،z]، وفقًا للزاوية المحددة في آخر معامل.
rotateX(a)	التفاوت حول محور X لتحويل العنصر بزاوية معينة.
rotateY(a)	تحويل العنصر حول محور Y بزاوية معينة.
rotateZ(a)	التفاوت حول محور Z لتحويل العنصر بزاوية معينة.
scale(sx,sy)	تقليل عرض العنصر وارتفاعه بناءً على الكمية المحددة.وظيفة scale(1,1) غير صالحة.
scale3d(sx,sy,sz)	تقليل العنصر على طول المحاور X،Y وZ بناءً على الكمية المحددة.وظيفة scale3d(1,1,1) غير صالحة.
scaleX(sx)	تقليل العنصر على طول المحور X.
scaleY(sy)	تقليل العنصر على طول المحور Y.
scaleZ(sz)	تقليل العنصر على طول المحور Z.
skew(ax,ay)	جعل العنصر ينحني على طول المحورين X وY بزاوية معينة.
skewX(ax)	جعل العنصر ينحني على طول المحور X بزاوية معينة.
skewY(ay)	جعل العنصر ينحني على طول المحور Y بزاوية معينة.
matrix(n,n,n,n,n,n)	تحديد تحويل 2D باستخدام مصفوفة التحويل التي تحتوي على ستة قيم.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	تحديد تحويل 3D باستخدام مصفوفة التحويل 4×4 من 16 قيمة.
perspective(length)	تحديد منظر التحويلات 3D للعنصر.عادةً،مع زيادة قيمة هذه الوظيفة،يظهر العنصر في مكان أقرب إلى المشاهد.
none	تحديد عدم تطبيق أي تحويل.
initial	تعيين هذه الخاصية إلى قيمتها الافتراضية.
inherit	إذا تم تحديد،فالعناصر المرتبطة تستخدم قيمة الخاصية transform للعنصر الأب.

توافق المتصفحات

توافق المتصفحات للخصائص transform،الرقم في الجدول التالي يوضح أحدث إصدار من المتصفح الذي يدعم هذه الخاصية؛جميع المتصفحات الشائعة يدعمون هذه الخاصية.

	Firefox ((2D))3.5 +،(3D)10+ ^-moz-,16 + Chrome ((2D))4 +،(3D)12+ ^-webkit-,36 + Internet Explorer ((2D))9 ^-ms-,10+ Apple Safari ((2D))3.2 +،(3D)4+ ^-webkit- Opera ((2D))10.5+ -o 　 ^-, ((2D)(3D))15+ 　 ^-webkit-,23+

قراءة المزيد

يرجى الرجوع إلى الدروس التالية:تحويلات 2D CSS3,تحويلات 3D CSS3

خصائص مرتبطة:backface-visibility,perspective,perspective-origin,transform-origin,transform-style.

خصائص transform-origin في CSS3 خصائص top في CSS