تحويلات CSS

كيفية العمل مع CSStransformمنشأه

تتيح لك التحويلات ترجمة العناصر وتدويرها وقياسها وانحرافها في مساحة ثنائية أو ثلاثية الأبعاد. إنها ميزة CSS رائعة جدًا ، خاصةً عند دمجها مع الرسوم المتحركة.

2D يتحول

الtransformتقبل الخاصية تلك الوظائف:

  • translate()لتحريك العناصر
  • rotate()لتدوير العناصر
  • scale()لقياس العناصر في الحجم
  • skew()لتحريف عنصر أو إمالته
  • matrix()طريقة لإجراء أي من العمليات المذكورة أعلاه باستخدام مصفوفة مكونة من 6 عناصر ، وهي بنية أقل سهولة في الاستخدام ولكنها أقل إسهابًا

لدينا أيضًا وظائف خاصة بالمحور:

  • translateX()لتحريك العناصر على المحور X.
  • translateY()لتحريك العناصر على المحور ص
  • scaleX()لقياس العناصر في الحجم على المحور X.
  • scaleY()لقياس العناصر في الحجم على المحور ص
  • skewX()لتحريف عنصر أو إمالته على المحور س
  • skewY()لتحريف عنصر أو إمالته على المحور ص

فيما يلي مثال على التحويل الذي يغير ملف.boxعرض العنصر بمقدار 2 (تكرار ذلك) والارتفاع بمقدار 0.5 (تقليله إلى النصف):

.box {
	transform: scale(2, 0.5);
}

transform-originيتيح لنا تعيين الأصل (ملف(0, 0)إحداثيات) للتحول ، مما يتيح لنا تغيير مركز الدوران.

الجمع بين تحويلات متعددة

يمكنك دمج تحويلات متعددة بفصل كل دالة بمسافة.

على سبيل المثال:

transform: rotateY(20deg) scaleX(3) translateY(100px);

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

يمكننا أن نخطو خطوة إلى الأمام وننقل عناصرنا في مساحة ثلاثية الأبعاد بدلاً من مساحة ثنائية الأبعاد. مع 3D ، نضيف محورًا آخر ، Z ، والذي يضيف عمقًا إلى المرئيات.

باستخدامperspectiveيمكنك تحديد مدى بُعد الكائن الثلاثي الأبعاد عن العارض.

مثال:

.3Delement {
  perspective: 100px;
}

perspective-originيحدد مظهر موضع العارض ، وكيف ننظر إليه في المحور X و Y.

يمكننا الآن استخدام وظائف إضافية تتحكم في المحور Z ، والتي تضيف ما يصل إلى تحويلات المحور X و Y الأخرى:

  • translateZ()
  • rotateZ()
  • scaleZ()

والاختصارات المقابلةtranslate3d()وrotate3d()وscale3d()كاختصارات لاستخدامtranslateX()وtranslateY()وtranslateZ()وظائف وهلم جرا.

تحميل مجانيكتيب CSS


المزيد من دروس css: