تبدیل دوبعدی در CSS
خوش اومدین به بیست و یکمین جلسه از دوره آموزش رایگان CSS. امروز قرار هست با یکی از قابلیت های جذاب CSS که در نسخه های اخیر css بویژه در CCS3 معرفی و توسعه داده شده آشنا بشیم. امکان transformation یا تبدیل که به دو شکل دوبعدی و سه بعدی در css امکانپذیر هست. امروز در مورد تبدیل دوبعدی در css صحبت میکنیم و با این ویژگی جالب آشنا میشیم.
تبدیل دوبعدی در CSS
ویژگی تبدیل در CSS به ما این امکان رو میده تا تبدیلهای scale, rotate, translate و skew رو روی عناصر موجود در صفحه وب خودمون اعمال کنیم.
این ابزار این امکان رو میده که شکل، اندازه و موقعیت عناصر رو در صفحه وب تغییر بدیم. ما میتونیم با استفاده از ویژگی transform از این قابلیت استفاده کنیم.
همونطور که گفتم CSS از تبدیل های دوبعدی و سه بعدی پشتیبانی میکنه و ما امروز قرار هست که تبدیل دوبعدی رو باهاش آشنا بشیم.
ما میتونیم با استفاده از ویژگی transform از این قابلیت استفاده کنیم.این ویژگی چند نوع متد رو میتونه دریافت کنه که هر کدوم نشون دهنده نوع تبدیل هست. در پایین انواع تبدیل دوبعدی رو ببینید.
انواع تبدیل دوبعدی
تبدیل دوبعدی شامل چندین متد زیر هست که میخایم یکی یکی اونها رو بررسی کنیم:
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrix()
متد translate
با استفاده از این متد میتونیم یک عنصر رو جابجا کنیم. در مثال زیر عنصر div رو از جایگاهی که قرار داره به اندازه ی ۵۰ پیکسل به سمت راست ۱۰۰ پیکسل به سمت پایین منتقل میکنیم.
div {
transform: translate(50px, 100px);
}
در قطعه کد بالا عدد اول مقدار جابجایی روی محور x هاست و عدد دوم مقدار جابجایی روی محور y هاست. بنابراین اگر عدد اول را همانند مثال بالا مثبت وارد کنیم عنصر ما به سمت راست میره و اگر منفی وارد کنیم به سمت چپ. همچنین اگر عدد دوم رو همانند مثال بالا مثبت وارد کنیم به سمت پایین و اگر منفی وارد کنیم به سمت بالا جابجا میشه.
متد rotate
ما با استفاده از متد rotate میتونیم عنصر خودمون رو با محوریت مرکز عنصر در جهت حرکت عقربه های ساعت و یا برخلاف جهت حرکت عقربه های ساعت بچرخونیم. توی مثال زیر عنصر div من ۲۰ درجه در جهت عقربه های ساعت میچرخه:
div {
transform: rotate(20deg);
}
در کد بالا به دلیل اینکه مقدار مثبت وارد کردیم عنصر div در جهت حرکت عقربه های ساعت میچرخه. اگه ما عدد منفی وارد میکردیم این چرخش برخلاف جهت حرکت عقربه های ساعت اتفاق میفتاد.
همانند کد زیر:
div {
transform: rotate(-20deg);
}
متد scale
این متد اندازه عنصر ما رو تغییر میده. ما میتونیم با مقداردهی به این متد، ابعاد عنصر خودمون رو تغییر بدیم.
نمونه کد زیر رو ببینید:
div {
transform: scale(2, 3);
}
در مثال بالا عرض تگ div من دو برابر و ارتفاع اون ۳ برابر میشه. ما میتونیم با استفاده از اعداد بین ۰ و ۱ مقدار عنصر خودمون رو کاهش بدیم. مثلا عدد 0.5 باعث میشه که عرض یا ارتفاع عنصر من نصف بشه. مثال زیر رو ببینید:
div {
transform: scale(0.5, 0.5);
}
در مثال بالا ابعاد عنصر div در عرض و ارتفاع نصف میشه.
همچنین ما میتونیم با استفاده از دو متد scaleX و scaleY این تغییر اندازه رو فقط برای محور xها و یا فقط برای محور yها ایجاد کنیم.
هرچند با خود متد scale هم میتوان این کار را انجام داد و جهتی که قصد تغییر آن را نداریم با مقدار ۱ پرکنیم. نمونه های زیر رو ببینید:
.div1 {
transform: scaleY(3);
}
.div2 {
transform: scaleY(0.5);
}
.div3 {
transform: scale(1, 0.5);
}
کلاسهای div1 و div2 رو بصورت اختصاصی در محور xها و برمحورyها تغییر اندازه دادم و در مثال سوم هم با قراردادن مقدار ۱ برای محور xها، در واقع کلاس div3 هم فقط در محور yها تغییر اندازه پیدا میکنه.
متد skew
ما با استفاده از متد skew میتونیم یه عنصر رو در جهت محورهای x و y بچرخونیم.
در مثال زیر من عنصر div رو به اندازه ۲۰ درجه در جهت محور xها و ۱۰ درجه در جهت محورهای yها چرخوندم:
div {
transform: skew(20deg, 10deg);
}
همچنین میتونیم با استفاده از دو متد skewX و skewY این چرخش رو تنها در محور x و یا تنها در محور y انجام بدیم. هرچند با خود متد skew هم میشه این کار رو انجام داد. کافیه محوری که میخایم چرخش نداشته باشه رو با عدد 0 مقداردهی کنیم.
متد matrix
ما با استفاده از متد matrix میتونیم تمامی تبدیلات دوبعدی رو که توی این جلسه باهاش آشنا شدیم رو بصورت یکجا انجام بدیم. در واقع این متد خلاصه تمامی متدهای تبدیل دوبعدی در CSS هست.
این متد ۶ پارامتر میگیره که شامل متدهای محاسباتی است که اجازه جابجایی، چرخش، تغییر اندازه و کج کردن عناصر هست.
ساختار این متد به شکل زیر هست:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());ما میتونیم با استفاده از مقادیر مربوط به متد در جایگاه مشخص شده بصورت یکجا از این متدها استفاده کنیم. نمونه زیر رو ببینید:
div{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
در مثال بالا مقادیر وارد شده به ترتیب به متدهای ذکر شده در ساختار اختصاص پیدا میکنه.
