شرح عن Transform CSS3

نبذة وشرح عن كل خواص الـ Transform في الـ CSS3

مالك القحطانيمنذ 5 سنوات

السلام عليكم ورحمة الله وبركاتة

أسعد الله ايامكم بكل خير أحبتي فلله ، اليوم سنشرح البروبارتي الخاصة بالـ "Transform" وكيفية طريقة عملها .

سنبتدي بأول خاصية وهي :

  • Rotate 

طبعاً الخاصية عبارة عن لف العناصر بدرجات معينة .

مثال عن السيلكتور 

transform : rotate(180deg); /* لف العنصر بمقدار 180 درجة */

 

  • Scale

هذه الخاصية عبارة عمل تمدد للعنصر

مثال عن السيلكتور 

transform : scale(.5,.5) /* scale( width, height) */

بلأمكان تحديد التمدد عن طريق الـ x ,y

transform : scalex(1); /* Scale with X */
transform : scaley(1); /* Scale with Y */
  • translate

وهذه الخاصية عبارة عن نقل العنصر من مكان إلى آخر 

transform : translate(10px ,21px); /* translate(width ,height) */
  • skew

وهذه الخاصية عبارة عن التحكم بميلان وإنحراف العنصر

transform: skew(20deg ,12deg);
  • matrix

وهي عبارة عن جميع كل الخواص في كود واحد

transform: matrix(1, -0.3, 0, 1, 0, 0); /* matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())*/

 

كلمات دليلية: css css3 desgin html
3
إعجاب
2326
مشاهدات
0
مشاركة
1
متابع

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !