تبدیل های CSS3 به شما امکان انتقال، چرخش، تغییر اندازه و انحراف عناصر را می  دهد
  • 1395/3/18 6/7/2016 4:37:42 PM 6/7/2016 4:37:42 PM
  • 0
  • 426

تبدیل های CSS3 به شما امکان انتقال، چرخش، تغییر اندازه و انحراف عناصر را می  دهد.

تبدیل افکتی است که به یک عنصر امکان تغییر شکل ، تغییر اندازه و تغییر مکان را می دهد.

CSS3 از تبدیل  دو بعدی و سه بعدی پشتیبانی می کند.


پشتیانی مرورگر از تبدیل های دو بعدی

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

خصوصیت

IE

Chrome

Firefox

Safari

Opera

transform

10.0

9.0 –

Ms-

36.0

4.0 –

Webkit-

3.2 –

Webkit-

23.0

15.0 –

Webkit-

12.1

10.5 –o-

23.0

15.0 –

Webkit-

12.1

10.5 –o-

transform-origin
(two-value syntax)

10.0

9.0 –

Ms-

36.0

4.0 –

Webkit-

16.0

3.5 –

Moz-

3.2 –

Webkit-

23.0

15.0 –

Webkit-

12.1

10.5 –o-

 

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

در این فصل شما با متدهای انتقال دوبعدی آشنا می شوید:

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

متد translate()

متد translate()  یک عنصر را از مکان فعلی اش جا به جا می کند (  مطابق پارامترهای داده شده برای محور x  و محور y  ). مثال زیر عنصر  <div>  را از مکان فعلی اش 50 پیکسل به راست ، و 100 پیکسل به پایین جابه جا می کند:

div {
    -ms-transform: translate(50px,100px); 
    -webkit-transform: translate(50px,100px); 
    transform: translate(50px,100px);
}


متد rotate()

متد rotate() عنصر را درجهت ساعتگرد یا پادساعتگرد مطابق با درجه ی داده شده ، چرخش می دهد.

متد زیر عنصر <div> را در جهت ساعتگرد 20 درجه چرخش می دهد:
مثال

 

div {
    -ms-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    transform: rotate(20deg);
}
استفاده از مقادیر منفی عنصر را در جهت پادساعتگرد می چرخاند. مثال زیر عنصر div را در جهت پادساعتگرد 20 درجه چرخش می دهد
div {
    -ms-transform: rotate(-20deg); 
    -webkit-transform: rotate(-20deg); 
    transform: rotate(-20deg);
}

 


متد scale()

متد scale()  اندازه ی یک عنصر را افزایش یا کاهش می دهد. ( مطابق پارامتر های داده شده برای ارتفاع و عرض ).

مثال زیر عنصر <div> را دو برابر عرض  اصلی، و سه برابر ارتفاع اصلی افزایش می دهید:

مثال

 

div {
    -ms-transform: scale(2,3); 
    -webkit-transform: scale(2,3); 
    transform: scale(2,3);
}

 

مثال زیر عنصر <div> را نصف عرض و ارتفاع اصلی کاهش می دهد:
مثال

div {
    -ms-transform: scale(0.5,0.5); 
    -webkit-transform: scale(0.5,0.5); 
    transform: scale(0.5,0.5);
}


متد skewX()

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

div {
    -ms-transform: skewX(20deg); 
    -webkit-transform: skewX(20deg); 
    transform: skewX(20deg);
}


متد skewY()

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

div {
    -ms-transform: skewY(20deg); 
    -webkit-transform: skewY(20deg); 
    transform: skewY(20deg);
}


متد skew()

متد skew()  یک عنصر را در طول محور Y  و X با زاویه داده شده کج می کند. مثال زیر یک عنصر <div>  را 20 درجه در طول  محور X و ده درجه در طول محور Y  کج می کند:
مثال

div {
    -ms-transform: skew(20deg, 10deg); 
    -webkit-transform: skew(20deg, 10deg); 
    transform: skew(20deg, 10deg);
}

اگر پارامتر دوم مشخص نشود، به صورت پیش فرض مقدار صفر می گیرد. بنابراین ، مثال زیر عنصر <div> را 20 درجه در طول محور X کج می کند:
مثال

div {
    -ms-transform: skew(20deg); 
    -webkit-transform: skew(20deg); 
    transform: skew(20deg);
}


متد matrix()

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

پارامترهای به شکل زیر است:

 

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

مثال

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); 
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}


خصوصیات تبدیل های دو بعدی CSS3

شرح

خصوصیت

انتقال دو بعدی یا سه بعدی را به یک عنصر اعمال می کند

transform

امکان تغییر مکان عناصر انتقال داده شده را می دهد

transform-origin

 

متدهای انتقال دو بعدی

شرح

متد

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

Matrix(n,n,n,n,n,n)

با جابه جا کردن عنصر در طول محور X  و محور Y  یک ترجمه دو بعدی را تعریف می کند.

Translate(x,y)

با جابه جا کردن عنصر در طول محور X  یک ترجمه ی دو بعدی را تعریف می کند

translateX(n)

با جابه جا کردن عنصر در طول محور Y  یک ترجمه ی دو بعدی را تعریف می کند

translateY(n)

با تغییر ارتفاع و عرض عناصر، یک تبدیل اندازه دو بعدی را تعریف می کند.

scale(x,y)

با تغییر عرض عناصر ، یک تبدیل اندازه ی دو بعدی را تعریف می کند

scaleX(n)

با تغییر ارتفاع عناصر ، یک تبدیل اندازه ی دو بعدی را تعریف می کند

scaleY(n)

یک چرخش دو بعدی را تعریف می کند، زاویه به صورت پارامتر داده می شود.

rotate(angle)

یک تبدیل کج کردن دو بعدی را در طول محور X  و محور Y  تعریف می کند

skew(x-angle,y-angle)

یک تبدیل کج کردن دو بعدی را در طول محور X  تعریف می کند

skewX(angle)

یک تبدیل کج کردن دو بعدی را در محور Y  تعریف می کند

skewY(angle)

 

 

محمد انصاری

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

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
تبدیل های دوبعدی CSS3
زیگماوب