2D Transforms

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

تستخدم خاصية transform لتطبيق تحويلات على العناصر، وتشمل هذه التحويلات التحريك (translate) والتدوير (rotate) والتكبير أو التصغير (scale) والانعكاس (flip) والميل (skew). يمكن دمج عدة تحويلات مختلفة في نفس الصفحة لإنشاء تأثيرات متعددة.

يتم تطبيق خاصية transform بشكل رئيسي مع خاصية transition في CSS، حيث يتم تحديد مدة الانتقال من حالة إلى حالة باستخدام خاصية transition-duration وتحديد نوع الانتقال باستخدام خاصية transition-timing-function.

وإليك بعض الأمثلة على استخدام transform في CSS:

/* تدوير العنصر بزاوية 45 درجة */
transform: rotate(45deg);

/* تكبير العنصر بنسبة 2 */
transform: scale(2);

/* انعكاس العنصر على محور الأفقية */
transform: scaleX(-1);

/* تحريك العنصر بـ 50 بكسل إلى اليمين */
transform: translateX(50px);

/* الميل الأفقي للعنصر بزاوية 30 درجة */
transform: skewX(30deg);

/* دمج عدة تحويلات مختلفة */
transform: rotate(45deg) scale(2) translateX(50px);

يمكن استخدام خاصية transform مع العناصر المختلفة في HTML، مثل النص والصور والأشكال والفيديو وغيرها، لإنشاء تأثيرات جميلة ومبتكرة.

شرح خاصية transform(translate)

خاصية transform translate في CSS تستخدم لتحريك العناصر في الصفحة بشكل ثنائي الأبعاد (على محور الأفقية والرأسية) أو ثلاثي الأبعاد (على محور العمق). تمكن هذه الخاصية المصممين من تحريك العناصر بشكل سلس ومرن، وتحقيق تأثيرات مثل التأرجح والانزلاق والدوران.

تستخدم خاصية translate بشكل رئيسي مع خاصية transform في CSS، حيث يتم تطبيق تحريك العنصر على التحويل الذي يتم تطبيقه على العنصر. يمكن تحديد القيمة النسبية للتحريك بوحدات البكسل أو النسبة أو القيم السالبة.

وإليك بعض الأمثلة على استخدام translate في CSS:

/* تحريك العنصر بـ 50 بكسل إلى اليمين */
transform: translateX(50px);

/* تحريك العنصر بـ 50 بكسل إلى الأسفل */
transform: translateY(50px);

/* تحريك العنصر بـ 50 بكسل إلى اليمين و 50 بكسل إلى الأسفل */
transform: translate(50px, 50px);

/* تحريك العنصر بنسبة 50% من ارتفاعه إلى الأسفل */
transform: translateY(50%);

/* تحريك العنصر بشكل ثلاثي الأبعاد */
transform: translate3d(50px, 50px, 50px);

/* تحريك العنصر بشكل سالب (إلى اليسار والأعلى) */
transform: translate(-50px, -50px);

يمكن استخدام خاصية translate مع العناصر المختلفة في HTML، مثل النص والصور والأشكال والفيديو وغيرها، لتحريكها بشكل سلس ومرن على الصفحة وتحقيق التأثيرات المرغوبة.

شرح خاصية transform(rotate)

خاصية transform rotate في CSS تستخدم لتدوير العناصر في الصفحة بزوايا مختلفة. تمكن هذه الخاصية المصممين من تحويل شكل العناصر وتحقيق تأثيرات مثل الدوران والإعوجاج والتحليق.

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

وإليك بعض الأمثلة على استخدام rotate في CSS:

/* تدوير العنصر بزاوية 45 درجة */
transform: rotate(45deg);

/* تدوير العنصر بزاوية 180 درجة */
transform: rotate(180deg);

/* تدوير العنصر بزاوية 90 درجة في اتجاه عقارب الساعة */
transform: rotate(-90deg);

/* تدوير العنصر بزاوية محددة بوحدات الراديان */
transform: rotate(1.57rad);

يمكن استخدام خاصية rotate مع العناصر المختلفة في HTML، مثل النص والصور والأشكال والفيديو وغيرها، لتحويل شكلها وتحقيق التأثيرات المرغوبة. يمكن دمج عدة تحويلات مختلفة في نفس الصفحة لإنشاء تأثيرات متعددة.

شرح خاصية transform(skew)

خاصية transform skew في CSS تستخدم لإمالة العناصر في الصفحة بزوايا مختلفة. تمكن هذه الخاصية المصممين من تحويل شكل العناصر وتحقيق تأثيرات مثل الانحراف والميل والتقوس.

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

وإليك بعض الأمثلة على استخدام skew في CSS:

/* الميل الأفقي للعنصر بزاوية 30 درجة */
transform: skewX(30deg);

/* الميل العمودي للعنصر بزاوية 45 درجة */
transform: skewY(45deg);

/* الميل بزوايا مختلفة في الاتجاهين الأفقي والعمودي */
transform: skew(30deg, 45deg);

/* الميل بزاوية سالبة */
transform: skew(-10deg);

يمكن استخدام خاصية skew مع العناصر المختلفة في HTML، مثل النص والصور والأشكال والفيديو وغيرها، لتحويل شكلها وتحقيق التأثيرات المرغوبة. يمكن دمج عدة تحويلات مختلفة في نفس الصفحة لإنشاء تأثيرات متعددة.

اختبار css transform

اضغط على start التي في منتصف الاختبار لبدء الاختبار