تبدیل دوبعدی (2D Transformation) در CSS3

خاصیت Transform در CSS3

با استفاده از خاصیت‌های transform می‌توان عناصر HTML را به‌راحتی جابجا کرد، چرخاند، مقیاس آن‌ها را تغییر داد یا با استفاده از زوایای دلخواه اریب کرد. این قابلیت‌ها به طراحان امکان ایجاد جلوه‌های بصری پیشرفته را می‌دهد. CSS3 از تبدیل‌های دو‌بعدی و سه‌بعدی نیز پشتیبانی می‌کند.

متدهای تبدیل دوبعدی در CSS3

متد ()translate

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

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

متد ()rotate

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

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

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

        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

می توانید عنصر مورد نظر خود را در 2 جهت عمودی و افقی به صورت 3 بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید. مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی 10 درجه می چرخاند می کند:

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

تابع ()skewX

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

 

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

تابع ()skewY

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

 

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

حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری 0 خواهد داشت. بنابراین مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور 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 به ترتیب زیر می باشند:

متدهای تبدیل دوبعدی: