آموزش CSS – ویژگی transform در CSS3 (دوبعدی)

در جلسه قبل از آموزش CSS با سایه در CSS3 آشنا شدید. در این بخش قصد داریم به ویژگی transform در CSS3 یپردازیم.

ویژگی transform در CSS3 امکان تغییر شکل, مکان و یا وضعیت یک عنصر را می دهد.

در اینجا ما در مورد transform دوبعدی صحبت خواهیم کرد.

تغییر شکل دوبعدی

یک المان تغییر شکل یافته بر روی المان فرزند تاثیر گذار نیست ولی می تواند آن باعث روی هم افتادن آن شود, مثل آنکه المان ها موقعیت دهی absolute را گرفتند.

به هر حال, المان تغییر شکل داده شده هنوز هم می تواند فضای فعلی را در مکان پیش فرض خود در صفحه بگیرد.

توابع transform در CSS3

ویژگی transform در CSS3 از توابعی برای دستکاری سیستم مختصات استفاده شده توسط یک المان به منظور ایجاد افکت transformation بهره می برد.

تابع translate()

المان را از موقعیت فعلی به موقعیت جدید در جهت محورهای x,y حرکت می دهد.

که بصورت translate(tx, ty) نوشته می شود. اگر مقدار ty مشخص نشود, فرض مرورگر این است که مقدار آن ۰ قرار دادیم.

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);  /* Standard syntax */    
}

img {

-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */

-moz-transform: translate(200px, 50px); /* Firefox */

-ms-transform: translate(200px, 50px); /* IE 9 */

transform: translate(200px, 50px); /* Standard syntax */

}

تابع translate(200px, 50px) تصویر را ۲۰۰ پیکسل بصورت افقی در محور x مثبت و ۵۰ پیکسل نیز در جهت عمود در محور y مثبت حرکت می دهد.

تابع rotate()

تابع rotate() , میزان درجه چرخش المان را مشخص می کند و گردش دور مبدایی که بوسیله ویژگی transform-origin تنظیم شده است, انجام خواهد شد.

img {
    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */
       -moz-transform: rotate(30deg);  /* Firefox */
        -ms-transform: rotate(30deg);  /* IE 9 */
            transform: rotate(30deg);  /* Standard syntax */    
}

img {

-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */

-moz-transform: rotate(30deg); /* Firefox */

-ms-transform: rotate(30deg); /* IE 9 */

transform: rotate(30deg); /* Standard syntax */

}

زاویه مثبت برای این تابع باعث می شود تا چرخش در جهت عقربه های ساعت صورت گیرد و زاویه منفی باعث چرخش در جهت عکس عقربه های ساعت می شود.

مقادیر این تابع می توانند از نوع درجه (deg), چرخش (turn) یا رادیان (rad) باشند.

تابع scale()

تابع scale() اندازه المان را افزایش یا کاهش می دهد. که بصورت scale(sx, sy) نوشته می دهد.

اگر sy مشخص نشود, مقدار آن معادل sx فرض خواهد شد.

img {
    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
        -ms-transform: scale(1.5);  /* IE 9 */
            transform: scale(1.5);  /* Modern Browsers */    
}

img {

-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */

-moz-transform: scale(1.5); /* Firefox */

-ms-transform: scale(1.5); /* IE 9 */

transform: scale(1.5); /* Modern Browsers */

}

تابع scale(1.5) نسبتا مقیاس عرض و ارتفاع تصویر را ۱٫۵ برابر سایز اصلی می کند.

تابع scale(1) یا scale(1, 1) روی المان تاثیری ندارد.

از این تابع برای بزرگ کردن المان هایی مثل input های چک باکس یا radio و غیره که امکان تعیین اندازه آن ها با width یا height نیست بسیار استفاده می شود و کاربرد دارد.

تابع skew()

با تابع skew که برای ویژگی transform , می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید.

این تابع بصورت skew(ax, ay) نوشته می شود که اگر ay را مشخص نکنید ۰ درنظر گرفته خواهد شد.

img {
    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
       -moz-transform: skew(-40deg, 15deg);  /* Firefox */
        -ms-transform: skew(-40deg, 15deg);  /* IE 9 */
            transform: skew(-40deg, 15deg);  /* Modern Browsers */    
}

img {

-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */

-moz-transform: skew(-40deg, 15deg); /* Firefox */

-ms-transform: skew(-40deg, 15deg); /* IE 9 */

transform: skew(-40deg, 15deg); /* Modern Browsers */

}

تابع skew(-40deg, 15deg) المان را -۴۰ درجه بصورت افقی در جهت محور x و ۱۵ درجه بصورت عمودی در جهت محور y حرکت می دهد.

تابع matrix()

با استفاده از تابع matrix که برای ویژگی transform , می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای دو بعدی انجام داد.

این ۶ پارامتر و تابع بالا در فرم ماتریکس و بصورت matrix(a, b, c, d, e, f) نوشته می شود.

بخش زیر به شما نحوه استفاده از توابع transform بصورت دو بعدی را در قالب matrix() نشان می دهد.

translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); = مقدارهای tx, ty نشان دهنده تغییر موقعیت عمودی و افقی هستند.
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); – از آنجا که a همان درجه است. از sin(a) و –sin(a) می توانید برای برعکس کردن چرخش استفاده کنید. حداکثر چرخش ۳۶۰ درجه است.
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0); – مقدارهای sx, sy مقیاس را بصورت افقی و عمودی نشان می دهد.
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); – ax, ay تعیین کننده مقدارهای افقی و عمودی بصورت درجه هستند.

اینجا یک مثال از انجام تغییر شکل دو بعدی با تابع matrix() است.

img {
    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */
        -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */
            transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Standard syntax */
}

img {

-webkit-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Chrome, Safari, Opera */

-moz-transform: matrix(0, -1, 1, 0, 200px, 50px); /* Firefox */

-ms-transform: matrix(0, -1, 1, 0, 200px, 50px); /* IE 9 */

transform: matrix(0, -1, 1, 0, 200px, 50px); /* Standard syntax */

}

به هر حال, زمانی که بیشتر از یک transform را یکجا اعمال می کنید, خیلی راحت تر از آن است که توابع مربوطه را بصورت زیر و به ترتیب قرار بدید :

img {
    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */
        -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Standard syntax */    
}

img {

-webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Chrome, Safari, Opera */

-moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Firefox */

-ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* IE 9 */

transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); /* Standard syntax */

}

قطعا محاسبه چنین ماتریسی آسان نیست. خوشبختانه ابزاری برای محاسبه آن ساخته شده است که آدرس آن را در زیر مشاهده می کنید.

فقط کافی است توابع transform را در محیط مشخص شده نوشته و دکمه را بزنید: meyerweb.com/eric/tools/matrix

توابع transform دوبعدی

جدول زیر یک خلاصه کوتاه از تمام توابع دوبعدی transform را می دهد.

تابع	توضیحات
`translate(tx,ty)`	المان را در جهت محورهای x و y حرکت می دهد
`translateX(tx)`	المان را در جهت محور x حرکت می دهد
`translateY(ty)`	المان را در جهت محور y حرکت می دهد
`rotate(a)`	المان را در جهت زاویه مشخص شده چرخش می دهد و این گردش بر اساس مبدا مشخص شده توسط transform-origin انجام می شود.
`scale(sx,sy)`	اندازه المان را افزایش یا کاهش می دهد. تابع scale(1,1) هیچ تاثیری روی المان ندارد
`scaleX(sx)`	عرض المان را افزایش یا کاهش می دهد.
`scaleY(sy)`	ارتفاع المان را افزایش یا کاهش می دهد.
`skew(ax,ay)`	المان را در جهت محور x,y کج یا مورب می کند
`skewX(ax)`	المان را در جهت محور x کج یا مورب می کند
`skewY(ay)`	المان را در جهت محور y کج یا مورب می کند
`matrix(n,n,n,n,n,n)`	تغییر شکل های دوبعدی را در ۶ مقدار دریافت و لحاظ می کند