ویژگی تغییر شکل (Transform) در CSS3

10 / 10
از 1 کاربر

ویژگی تغییر شکل (Transform) در CSS3 به شما این امکان را می دهد تا عناصر را برگردانید، بچرخانید و یا آنها را مورب کنید. در واقع تغییر شکل در طراحی سایت ، افکتی است که اجازه می دهد که یک عنصر از نظر شکل، اندازه و موقعیت تغییر کند. CSS3 از تغییر شکل دو بعدی و سه بعدی پشتیبانی می کند.

تغییر شکل دو بعدی (2D) در CSS3

در این بخش در مورد روش های تغیر شکل دو بعدی در طراحی سایت می آموزید. روش های زیر روش هایی هستند که با کمک آنها می توانید در طراحی سایت خود، تغییر شکل های دو بعدی ایجاد کنید.

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

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

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

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

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

4. skewX() ، skewY() و skew () : روش skewX() ، عنصر را در امتداد محور x براساس زاویه داده شده منحرف می کند. و در روش skewY() عنصر در امتداد محور Y ها منحرف می شود. و در نهایت در روش skew () عنصر در هر دو امتداد محور X محور Y منحرف می شود. در روش skew () میزان درجه اول، درجه انحراف از محور X است که با یک کاما از میزان درجه انحراف از محور Y جدا می شود(در صورت صفر بودن یکی از درجه ها از نوشتن آن خودداری می کنیم). در نمونه ارائه شده در زیر عنصر <div> به میزان 20 درجه در امتداد محور x منحرف می شود.

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

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

ارسال نظر و نظرات ثبت شده