گروه مقاله : CSS3
تاريخ انتشار : 1394/03/05 - 12:18
كد :598
CSS3 به شما این امکان را می دهد که به عناصر خود جلوه های دو بعدی (2D) یا سه بعدی (3D) بدهید.
با استفاده از تبدیل سه بعدی می توانید به عناصر جلوه سه بعدی اضافه کنید.
در این فصل، با سه متد زیر آشنا خواهید شد:
-
()rotateX
-
()rotateY
-
()rotateZ
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
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- |
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-
|
مرورگرهای Internet Explorer 10 و Firefox تبدیل سه بعدی را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پشوند -webkit- نیاز دارند.
مرورگر Opera تبدیل سه بعدی را پشتیبانی نمی کند. (تنها تبدیل دو بعدی را پشتیبانی می کند)
متد ()rotateX در CSS3
متد ()rotateX، عنصر را با گرفتن یک درجه، حول محور X می چرخاند:
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
متد ()rotateY در CSS3
متد () rotateY، عنصر را با گرفتن یک درجه، حول محور Yمی چرخاند:
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
متد ()rotateZ در CSS3
متد ()rotateZ، عنصر را با گرفتن یک درجه، حول محور Z می چرخاند:
div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
خاصیت های تبدیل در CSS3
در جدول زیر، لیست تمام خاصیت های تبدیل آورده شده است:
|
خاصیت |
توضیحات |
|
transform |
برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود |
|
transform-origin |
به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید |
|
transform-style |
نحوه ی عمل عناصر تودرتو در فضاهای سه بعدی را مشخص می کند |
|
perspective |
(نحوه نمایش عناصر سه بعدی را مشخص می کند.(دور نما |
|
perspective-origin |
مشخص کننده محل قرار گیری عنصر سه بعدی از پایین |
|
backface-visibility |
زمانی که در اثر چرخش، پشت عنصر نمایان می شود، مشخص می کند که عنصر نمایش داده شود یا خیر |
متدهای تبدیل سه بعدی
|
متد |
توضیحات |
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
تمامی تبدیل های سه بعدی را دربردارد |
|
translate3d(x,y,z) |
یک حرکت سه بعدی، تعریف می کند |
|
translateX(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) |
یک دورنمای سه بعدی تعریف می کند |