ترنسفرم های دو بعدی در css3 به شما اجازه می دهد تا عناصر را تغییر شکل داده ، بچرخانید ، تغییر اندازه بدهید و از هر گوشه که می خواهید بکشید.
یک ترنسفرم ، جلوه ای است که امکان تغییر شکل ، اندازه یا موقعیت یک عنصر را فراهم می کند.
css3 از ترنسفرم های دو بعدی و سه بعدی پیشتیبانی می کند.

پشتیبانی مرورگر برای ترنسفرم های دو بعدی

اعداد داخل جدول نشان دهنده اولین ورژن از مرورگر است که بطور کامل از این صفت پشتیبانی می کند.
اعدادی که همراه با -ms- ، -webkit- ، -moz- یا -o- همراه هستند نشان دهنده اولین ورژن از مرورگر است که می تواند با prefix کار کند.

انواع ترنسفرم های css3

در این درس شما با متدهای ترنسفرم دوبعدی که در زیر لیست شده است آشنا خواهید شد.

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

نکته ! در مورد ترنسفرم های سه بعدی در ردس بعدی یاد خواهید گرفت.

متد 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);
}

استفاده از مقادیر منفی ، چرخش را در جهت خلاف عقربه های ساعت انجام می دهد.
مثال زیر عنصر <div> را 20 درجه خلاف عقربه های ساعت می چرخاند.

مثال :

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

متد scale

متد scale ابعاد یک عنصر را کاهش یا افزایش می دهد. ( با توجه به مقادیری که به عرض و ارتفاع می دهیم)
مثال زیر ارتفاع عنصر <div> را 3 برابر و عرض آن را 2 برابر می کند.

مثال :

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);
}

متد skewX

متد skewX عنصر را با توجه به زاویه ای که تنظیم می شود بر روی محور X کج می کند.
مثال زیر عنصر <div> را 20 درجه روی محور X کج می کند.

مثال :

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

متد skewY

متد skewY عنصر را با توجه به زاویه ای که تنظیم می شود بر روی محور Y کج می کند.
مثال زیر عنصر <div> را 20 درجه روی محور Y کج می کند.

مثال :

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

متد skew

متد skewY عنصر را با توجه به زاویه ای که تنظیم می شود بر روی محورهای X و Y کج می کند.
مثال زیر عنصر <div> را 20 درجه روی محور X و 10 درجه روی محور Y کج می کند.

مثال :

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

اگر پارامتر دوم تعیین نشود ، مقدارش صفر در نظر گرفته شده و نهایتاً عنصر روی محور X کج می شود.
در مثال زیر این اتفاق قابل مشاهده است.

مثال :

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

متد matrix

متد matrix تمام متد های دو بعدی را در یک متد تجمیع می کند.
متد matrix شش پارامتر دریافت می کند که شامل محاسبات ریاضی است. این محاسبات امکان چرخش ، تغییر ابعاد ، جابجایی و کج کردن عناصر را فراهم می کند.

مثال :

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);
}