شرح عن Transform CSS3

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

أسعد الله ايامكم بكل خير أحبتي فلله ، اليوم سنشرح البروبارتي الخاصة بالـ "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