میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

تبدیلات دو بعدی (۲D Transforms) در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش تبدیلات دو بعدی (۲D Transforms) در CSS با من همراه باشید.

یکی از قابلیت های جذابی که در نسخه های اخیر CSS به ویژه در نسخه ی CSS3 معرفی و توسعه یافته قابلیت تبدیل دو بعدی در CSS است، این ویژگی به شما اجازه می دهد تا انواع حرکات ، انتقال ها و چرخش ها را روی عناصر HTML اعمال کنید، همچنین با اعمال یک قابلیت انیمیشن به تبدیلات می توان افکت های حرکت آهسته ی تبدیل را به عنصر اعمال کرده و جذابیت کار را دو چندان کرد. در ادامه ی این مبحث ما شما را با روش کار با تبدیل دو بعدی در CSS آشنا خواهیم کرد.

انواع تبدیل دوبعدی ها در CSS

متدهای تبدیل دو بعدی شامل موارد زیر است:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

 


متد translate()

متد translate() یک عنصر را از موقعیت فعلی آن حرکت می دهد (البته بر اساس پارامترهایی که برای محورهای X و Y تعیین شده است). در واقع با بهره گیری از این متد می توان المان دلخواه را کپی کرده و آن را به مکانی دیگر انتقال داد. مثال زیر تگ یا عنصر div را به اندازه ی ۵۰ پیکسل به سمت راست و ۱۰۰ پیکسل پایین تر از موقعیت جاری آن حرکت می دهد :

div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}

تابع rotate()

متد rotate() بسته به درجه ی تعیین شده یک عنصر را در جهت عقربه ی ساعت یا در جهت خلاف آن می چرخاند (دوران می کند). مثالی که زیر مشاهده می کنید المان div را به اندازه ی ۲۰ درجه در جهت حرکت عقربه ی ساعت می چرخاند :

 

div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}

 

استفاده از مقادیر منفی (negative values) باعث می شود عنصر خلاف عقربه ی ساعت چرخانده شود. مثال زیر المان div را ۲۰ درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند) :

div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}

 


متد Scale()

تابع scale() اندازه ی المان را افزایش یا کاهش می دهد (کوچک و بزرگ می کند). این کار بر اساس پارامترهایی که برای طول و عرض (height ,width) تعریف می شود صورت می پذیرد. مثال زیر عرض یا پهنای المان div را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند :

 

div {
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}

 

نمونه ی زیر عنصر div را نصف عرض و ارتفاع اصلی خود عنصر تعیین می کند :

div {
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}


متد Skew()

می توانید عنصر مورد نظر خود را در ۲ جهت عمودی و افقی به صورت ۳ بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی ۳۶۰ بچرخانید. مثال زیر المان div را به اندازه ی ۲۰ درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی ۱۰ درجه می چرخاند می کند :

 

div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}

 


تابع skewX()

متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند. br نمونه ی زیر المان div را در امتداد محور X به اندازه ی ۲۰ درجه می چرخاند :


 
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}


تابع skewY()

متد skewY() یک عنصر را در امتداد محور Y به اندازه ی درجه ی زاویه ی تعیین شده (بر حسب واحد deg) می چرخاند. مثال زیر عنصر div را به اندازه ی ۲۰ درجه در امتداد محور Y می چرخاند :

 
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
 

حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری ۰ خواهد داشت. بنابراین مثال زیر المان div را به اندازه ۲۰ درجه در امتداد محور X می چرخاند :

 
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
 



متد matrix()

متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند). تابع matrix() 6 مقدار می گیرد, که شامل توابع ریاضی (mathematics functions) می شود و به شما امکان می دهد المان های خود را بچرخانید, مقایس بندی (کوچک و بزرگ) کنید, حرکت دهید (translate: انتقال دادن) و همچنین آن ها را مطابق نیاز با زوایای مختلف بچرخانید (skew) کنید :


 
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
 

تمامی خاصیت های transform CSS3 به ترتیب زیر می باشند :

  • خاصیت transform : وضعیت نمایش المان را به دو بعدی یا سه بعدی تبدیل می کند.
  • خاصیت transform-origin : اجازه می دهد موقعیت المان های تبدیل شده (transformed element) را تغییر دهید.

متدهای تبدیل دو بعدی نیز به شرح زیر هستند :

  • متد (matrix(n,n,n,n,n,n : تبدیل دو بعدی عنصر را با تابع matrix که ۶ مقدار به آن اختصاص داده شده باشد, تعریف می کند.
  • متد (translate(x,y : انتقال دو بعدی عنصر را در حول محورهای X و Y مقدار دهی می کند.
  • متد (translateX(n : انتقال دو بعدی عنصر را در طول محور X تعریف می کند.
  • متد (translateY(n : انتقال دو بعدی عنصر را امتداد محور Y تنظیم و مقدار دهی می کند.
  • متد (scale(x,y : مقیاس بندی عنصر را به صورت دو بعدی تعیین کرده, طول و عرض عناصر را اصلاح می کند.
  • متد (scaleX(n : مقیاس بندی عنصر را به صورت دو بعدی تعریف کرده, عرض عنصر را تغییر می دهد.
  • متد (scaleY(n : تبدیل مقیاس عنصر را به صورت دو بعدی تعریف کرده, ارتفاع یا طول آن را اصلاح می کند.
  • متد (rotate(angle : چرخش عنصر را به صورت دو بعدی تعریف می کند و زاویه ی آن را در پارامتر مربوطه تعیین می کند.
  • متد (skew(x-angle,y-angle : عنصر را در امتداد هر دو محور X و Y به صورت دو بعدی بسته به مقدار تعیین شده می چرخاند.
  • متد (skewX(angle : عنصر را به صورت دو بعدی در امتداد محور X می چرخاند (تغییر و تبدیل وضعیت عنصر را به صورت دو بعدی در حول محور X مقداردهی و تعریف می کند).
  • متد (skewY(angle : عنصر را به صورت دو بعدی در امتدادی محور Y (بر اساس مقدار تعیین شده) می چرخاند.

 


امیدواریم آموزش تبدیلات دو بعدی (۲D Transforms) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

2D Transforms2d transforms in css2D Transforms در CSScssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfتبدیلات دو بعدی در CSSدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟