تبدیل سه بعدی در CSS3
تبدیل سه بعدی یا (3D transforms) در CSS3
با استفاده از تبدیل سه بعدی می توانید به عناصر جلوه سه بعدی اضافه کنید.
در این مطلب، دو متد زیر را فرا خواهید گرفت:
- ()rotateX
- ()rotateY
برای مشاهده تفاوت بین تبدیل دو بعدی و سه بعدی، روی عناصر زیر کلیک نمایید:
چرخش
دو بعدی
دو بعدی
چرخش
سه بعدی
سه بعدی
پشتیبانی مرورگرها
| خاصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
| transform |  |
 |
 |
 |
 |
مرورگرهای Internet Explorer 10 و Firefox تبدیل سه بعدی را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پشوند -webkit- نیاز دارند.
مرورگر Opera تبدیل سه بعدی را پشتیبانی نمی کند. (تنها تبدیل دو بعدی را پشتیبانی می کند)
متد ()rotateX در CSS3
با استفاده از متد ()rotateX، می توان عنصر را با گرفتن یک درجه، حول محور X چرخاند.
مثال (تبدیل سه بعدی در CSS3)
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
خودتان امتحان کنید »{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
متد ()rotateY در CSS3
با استفاده از متد ()rotateY، می توان عنصر را با گرفتن یک درجه، حول محور Y چرخاند.
مثال (تبدیل سه بعدی در CSS3)
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
خودتان امتحان کنید »{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
خاصیت های تبدیل در CSS3
در جدول زیر، لیست تمام خاصیت های تبدیل، آورده شده است:
| خاصیت | توضیحات | CSS |
|---|---|---|
| transform | برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود. | 3 |
| transform-origin | به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید. | 3 |
| transform-style | نحوه ی عمل عناصر تودرتو در فضاهای سه بعدی را مشخص می کند. | 3 |
| perspective | نحوه نمایش عناصر سه بعدی را مشخص می کند.(دور نما) | 3 |
| perspective-origin | مشخص کننده محل قرار گیری عنصر سه بعدی از پایین. | 3 |
| backface-visibility | زمانی که در اثر چرخش، پشت عنصر نمایان می شود، مشخص می کند که عنصر نمایش داده شود یا خیر. | 3 |
متدهای تبدیل سه بعدی
| متد | توضیحات |
|---|---|
| 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) | یک چرخش سه بعدی، تعریف می کند. (angle: زاویه چرخش) |
| rotateX(angle) | یک چرخش سه بعدی، حول محور X تعریف می کند. |
| rotateY(angle) | یک چرخش سه بعدی، حول محور Y تعریف می کند. |
| rotateZ(angle) | یک چرخش سه بعدی، حول محور Z تعریف می کند. |
| perspective(n) | یک دورنمای سه بعدی (perspective)، تعریف می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21920