CSS3 Modules

css3 التحويلات ثنائية الأبعاد

آخر تحيين: 14-10-2014

css3 التحويلات ثلاثية الأبعاد CSS3 تأثيرات النص


من بين الوحدات التي أضافتها css3 هي التحويلات ثنائية الأبعاد . بواسطة خاصيتين transform و transform-origin يمكننا التلاعب بإحداثيات عنصر من عناصر html على محوري x و y (أفقيا و عموديا) . تستعمل الخاصية trasform مجموعة من الدوال ، تتيح لنا التأثير على العناصر ، إذ يمكننا تحريكها ، تغيير مقاييس أبعادها ، تغيير درجة الإنحراف ، الدوران و تغيير حجمها . سنتعرف في هذا الدرس على الدوال ثنائية الأبعاد . قبل ذلك لنلقي نظرة على المتصفحات التي تدعم الخاصيتين

رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيتين
الخاصية
transform36.0
-webkit- 4.0
16.0
-moz- 3.5
6.1
-webkit- 3.2
23.0
-webkit- 15.0
12.1
-o- 10.5
10.0
-ms- 9.0
transform-origin
(ببعدين = بقيمتين)
36.0
-webkit- 4.0
16.0
-moz- 3.5
6.1
-webkit- 3.2
23.0
-webkit- 15.0
12.1
-o- 10.5
10.0
-ms- 9.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-ms-, -moz- , -o- , -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات

2D Transform

الدوال التي تتماشى مع الخاصية transform :

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

الدالة translate(x,y)


يتم تحريك العنصر من وضعيته الأصلية حسب محوري X(من اليسار) و Y(من أعلى)
في المثال أسفله سنقوم بتحريك العنصر ب (30 بيكسل) من اليسار و (50 بيكسل) من الأعلى

.translation {
  -ms-transform: translate(30px,50px); /* IE 9 */
  -moz-transform: translate(30px,50px); /* Firefox */
  -webkit-transform: translate(30px,50px); /* Chrome, Safari, Opera */
  -o-transform: translate(30px,50px); /* Opera < 11 */
  transform: translate(30px,50px); /* الخاصية الأصلية */
}
مشاهدة النتيجة

الدالتان translateX و translateY

دالتان مشتقتان من translate .
translateX : تُحرّك العنصر أفقيا على محور X . مثال : transform: translateX(30px);
translateY : تُحرّك العنصر عموديا على محور Y . مثال : transform: translateY(50px);
لاستعمال الدالتين معا : transform: translateX(30px) translateY(50px); هذه الطريقة تعطينا نفس النتيجة السابقة transform: translate(30px,50px)
أعطيكم بعض الأمثلة :

.translationX{
   -moz-transform: translateX(30px);
   -webkit-transform: translateX(30px);
   -o-transform: translateX(30px);
   -ms-transform: translateX(30px);
   transform: translateX(30px);
 }
مشاهدة النتيجة

الدالة rotate(deg)


تتيح هذه الدالة دوران العنصر ، نعطيها القيمة بعدد الدرجات (degre) . يمكن للقيمة أن تكون سلبية أو إيجابية ، كما يمكننا إعطاء قيمة أكبر من °360 درجة . مثلا °400 درجة ستعطينا °40 درجة فقط . حاليا لا يهم إن كتبتم °400 أو °40 درجة فالأمر لا يختلف . لكن أثناء تنشيط العناصر معنى °400 درجة سيختلف تماما و سيعني أن العنصر سيقوم بدورة كاملة حول النقطة الأصلية (°360) ثم يضيف °40 درجة،

.rotation {
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}
معاينة النتيجة

الدالة scale(x,y)


تتيح لنا الدالة scale تغيير حجم العنصر ، تكبيره أو تصغيره حسب محوري X و Y . المحور X يلعب على حجم عرض العنصر و Y على طوله
في المثال أسفله ، سنزيد عرض العنصر بضعفي حجمه الأصلي و طوله بثلاثة أضعاف

.rotation {
  -ms-transform: scale(2 ,3);
  -webkit-transform: scale(2 ,3);
  -moz-transform: scale(2 ,3);
  -o-transform: scale(2 ,3);
  transform: scale(2 ,3);
}
معاينة النتيجة

الدالتان scaleX و scaleY

مشتقتان من الدالة scale
scaleX: تكبير عرض العنصر أفقيا وفق محور X
scaleY: تكبير طول العنصر عموديا وفق محور Y

.scale-x {
    -webkit-transform:scaleX(2.5);
    -moz-transform:   scaleX(2.5);
    -o-transform:     scaleX(2.5);
    -ms-transform:    scaleX(2.5);
    transform:        scaleX(2.5);
 }
معاينة النتيجة

الدالة skew(x,y)


الدالة skew تلعب على درجة ميلان زوايا العنصر وفق محوري X و Y .
في المثال أسفله ، يميل العنصر °15 درجة حول محور X و °30 درجة حول محور Y

.oblique {
  -ms-transform: skew(15deg ,30deg);
  -webkit-transform: skew(15deg ,30deg);
  -moz-transform: skew(15deg ,30deg);
  -o-transform: skew(15deg ,30deg);
  transform: skew(15deg ,30deg);
}
معاينة النتيجة

الدالتان skewX و skewY


الدالتان مشتقتان من الدالة skew() . بطبيعة الحال ، كل دالة ستأخذ قيمة واحدة فقط ، مثلا إذا أردنا أن يميل العنصر °15 درجة حول محور X :

transform: skewX(15deg);

أما إذا أردنا استعمال الدالتين معا :

transform: skewX(15deg) skewY(15deg);

الدالة matrix()

هذه الدالة عبارة عن مصفوفة تجمع بين وظائف كل الدوال الأخرى ، من تحريك و ميلان و دوران و تغيير الحجم و نعطيها 6 قيم . لسوء الحظ أن الدالة تستعمل حسابات رياضية معقدة و ليست في مستوى الجميع . بالنسبة للعلميين يمكنكم الإطلاع على هذا الرابط لفهم طريقة توظيف المصفوفات في لغة css3 "المقال باللغة الإنجليزية"
سنقتصر حاليا على المثال التالي :
لنفترض أننا نريد إجراء مجموعة من التحويلات التي رأيناها ، دفعة واحدة :

transform: rotate(15deg) translateX(230px)  scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px);

هذه الشيفرة تعادل المصفوفة أسفله

transform:  matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);

transform-origin

تستعمل هذه الخاصية موازاة مع الخاصية transform .
transform-origin تتيح لنا تغيير إحداثيات العنصر الذي أجرينا عليه التحويلات . أي تغيير نقطة الأصل للمحورين X و Y . في التحويلات الثلاثية الأبعاد يمكننا أيضا اللعب على عمق المحور Z .
القيمة المبدئية للخاصية ، تُمركز النقطة الأصلية "o" وسط العناصر . و هي تعادل :

transform-origin: 50% 50%;

الخاصية سهلة الإستعمال ، أعطيكم بعض الأمثلة لتفهموا دورها جيدا :

.rotation-origine0 {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);

    -webkit-transform-origin: 0 0;		
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;	
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
 }
مشاهدة النتيجة

بالإضافة للنسبة المؤية ، يمكننا استعمال مجموعة من القيم الأخرى مع الخاصية transform-origin و هي :
top|bottom|right|left|center|length|inherit|initial
مثلا transform-origin: 50% 50%; يمكننا أيضا كتابتها كالتالي :

transform-origin: center center;

مجموع هذه القيم تتعلق بخاصية transform-origin في فضاء ثنائي الأبعاد . أما في فضاء ثلاثي الأبعاد ، يمكننا أيضا تحديد النقطة الأصلية لمحور "Z" . لكن القيمة الوحيدة المسموح بها لهذا المحور هي قيمة : length ، مثال :

transform-origin: right bottom 2cm;