CSS3  به شما اجازه می دهد عناصر خود را با استفاده از تبدیل های سه بعدی شکل بدهید
  • 1395/3/18 6/7/2016 4:38:41 PM 6/7/2016 4:38:41 PM
  • 0
  • 426

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


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

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

خصوصیت

IE

Chrome

Firefox

Safari

Opera

transform

10.0

26.0

12.0

Webkit-

16.0

10.0

Moz-

4.0  -

Webkit-

23.0

15.0 –

Webkit-

transform-origin
(three-value syntax)

10.0

36.0

12.0 –

Webkit-

16.0

10.0 –

Moz-

4.0 -

Webkit-

23.0

15.0 -

Webkit-

transform-style

11.0

36.0

12.0 –

Webkit-

16.0

10.0 -

Moz-

4.0 -

Webkit-

23.0

15.0 –

Webkit-

perspective

10.0

36.0

12.0 –

Webkit-

16.0

10.0 –

Moz-

4.0 -

Webkit-

23.0

15.0 –

Webkit-

perspective-origin

10.0

36.0

12.0 –

Webkit-

16.0

10.0 –

Moz-

4.0 -

Webkit-

23.0

15.0 –

Webkit-

backface-visibility

10.0

36.0

12.0 –

Webkit-

16.0

10.0 –

Moz-

4.0 -

Webkit-

23.0

15.0 –

Webkit-

 


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

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

  • rotateX()
  • rotateY()
  • rotateZ()

متد rotateX() :

متد rotateX()  یک عنصر را حول محور X  با زاویه داده شده چرخش می دهد:
مثال

 

div {

    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

متد rotateY() :

متد rotateY()  یک عنصر را حول محور Y  با زاویه داده شده چرخش می دهد:
مثال

 

div {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}

متد rotateZ() :

متد rotateZ()  یک عنصر را حول محور Z  با زاویه داده شده چرخش می دهد:
مثال

 

div {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}

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

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

شرح

خصوصیت

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

transform

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

transform-origin

تعیین می کند عناصر درونی چگونه در فضای سه بعدی نمایش داده شود

transform-style

نمایی را مشخص می کند که چگونه عناصر سه بعدی مشاهده شده اند.

perspective

مکان پایینی عناصر سه بعدی را مشخص می کند

perspective-origin

مشخص می کند که وقتی یک عنصر روبه رو به صفحه نمایش نیست نمایش داده شود یا نه

backface-visibility

 

 

 

متدهای تبدیل سه بعدی

 

شرح

متد

با استفاده از یک ماتریس  4x4 با 16 مقدار یک تبدیل سه بعدی را تعریف می کند

Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n, n,n,n,n)

یک ترجمه سه بعدی را تعریف می کند

Translate3d(x,y)

تنها با استفاده از مقداری برای محور X یک ترجمه ی سه بعدی را تعریف می کند

translateX(x)

تنها با استفاده از مقداری برای محور Y یک ترجمه ی سه بعدی را تعریف می کند

translateY(y)

تنها با استفاده از مقداری برای محور Z یک ترجمه ی سه بعدی را تعریف می کند

translateZ(z)

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

Scale3d(x,y,z)

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

scaleX(x)

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

scaleY(y)

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

scaleZ(z)

یک چرخش سه بعدی را تعریف می کند.

rotate3d(x,y,z,angle)

یک چرخش سه بعدی در طول محور X  تعریف می کند

rotateX(angle)

یک چرخش سه بعدی در طول محور Y  تعریف می کند

rotateY(angle)

یک چرخش سه بعدی در طول محور Z  تعریف می کند

rotateZ(angle)

یک نمایش نما برای عنصر تبدیل سه بعدی شده تعریف می کند

perspective(n)

 

محمد انصاری

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

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

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