تبدیل سه‌بعدی در CSS3
با استفاده از CSS3 می‌توانید به عناصر HTML جلوه‌های سه‌بعدی بدهید. این قابلیت به طراحان امکان ایجاد تجربه‌های بصری پیشرفته‌تر و طبیعی‌تری را فراهم می‌کند. در این مقاله با مهم‌ترین متدهای سه‌بعدی CSS3 مانند rotateX(), rotateY(), rotateZ() و دیگر توابع آشنا خواهید شد.
مرورگرهای پشتیبانی‌کننده از خاصیت Transform
مرورگرهای زیر با ذکر ویرایشی که از این خاصیت پشتیبانی می کنند در جدول زیر ارائه گردیده:
خاصیت
IE
Chrome
Firefox
Safari
Opera
transform
10.0
36.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-
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
به کمک متد ()rotateX می توان عنصر مورد نظر را بر حول محور X آن، به میزان درجه تعریف شده، چرخاند.
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
تابع ()rotateY
متد مزبور یک المان را حول محور Y بر اساس درجه ی تعیین شده می چرخاند.
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
متد ()rotateZ
تابع مذکور یک المان را حول محور Z آن بر اساس درجه ی معین می چرخاند:
div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
خاصیت های transform CSS3
جدول زیر کلیه ی خاصیت های مربوط به transform در CSS3 را فهرست می کند:
transform
جلوه ی دو بعدی و سه بعدی به عنصر مربوطه اعمال می کند
transform-origin
به شما اجازه می دهد تا موقعیت عنصر تبدیل شده را تغییر دهید
transform-style
تعیین می کند چگونه المان های تودرتو (nested) در فضای سه بعدی پردازش و نمایش داده شود
perspective
نحوه نمایش عناصر سه بعدی را مشخص می کند. (دور نما)
perspective-origin
تعریف کننده ی محل قرار گیری المان سه بعدی از پایین.
backface-visibility
هنگامی را در اثر چرخش، پشت عنصر نمایان می شود (جلوی آن نمایان نیست)، تعیین می کند که المان نمایش داده شود یا خیر
توابع پیشرفته سه‌بعدی در CSS3
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
کلیه ی تبدیل های سه بعدی را دربر می گیرد
translate3d(x,y,z)
انتقال (حرکت) سه بعدی عنصر را مقدار دهی می کند
translateX(x)
یک انتقال سه بعدی را تعریف کرده و فقط مقدار محور X را بکار می برد (حرکت سه بعدی، در جهت محور X تعریف می کند)
translateY(y)
یک حرکت سه بعدی، در جهت محور Y تعریف می کند
translateZ(z)
یک حرکت سه بعدی، در جهت محور Z تعریف می کند
scale3d(x,y,z)
یک تغییر اندازه سه بعدی (مقیاس بندی سه بعدی)، تعریف می کند
scaleX(x)
یک تغییر اندازه سه بعدی، در طول محور X تعریف می کند
scaleY(y)
یک تغییر اندازه سه بعدی، در امتداد محور Y تعریف می کند
scaleZ(z)
یک تغییر اندازه سه بعدی، در جهت محور Z تعریف می کند
rotate3d(x,y,z,angle)
چرخش سه بعدی را تعریف می کند
rotateX(angle)
چرخش عنصر را در امتداد محور X تعریف می کند
rotateY(angle)
چرخش سه بعدی در طول محور Y تعریف می کند
rotateZ(angle)
یک چرخش سه بعدی در امتداد محور Z تعریف می کند
perspective(n)
یک دورنمای سه بعدی (perspective) برای المان تبدیل شده تعریف می کند
