تغییرات 3D CSS
- صفحه قبلی تغییرات 2D CSS
- صفحه بعدی گذر CSS
تغییرات 3D CSS
CSS همچنین پشتیبانی از تبدیل‌های سه‌بعدی را دارد.
لطفاً ماوس خود را بر روی عناصر زیر قرار دهید تا تفاوت بین تبدیل 2D و 3D را مشاهده کنید:
چرخش 2D
چرخش 2D
چرخش 3D
transform
در این فصل، شما خواهید آموخت که از چه ویژگی‌های CSS استفاده کنید:
پشتیبانی مرورگر
| ویژگی | تعداد در جدول نشان‌دهنده نسخه اولین مرورگر است که از این ویژگی کامل پشتیبانی می‌کند. | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
روش‌های تبدیل CSS 3D
از طریق CSS transform ویژگی، شما می‌توانید از روش‌های تبدیل 3D زیر استفاده کنید:
rotateX()rotateY()rotateZ()
تابع rotateX()
rotateX() تابعی که عنصر را به زاویه‌ای مشخص به دور محور X می‌چرخاند:
مثال
#myDiv {
transform: rotateX(150deg);
}
تابع rotateY()
rotateY() تابعی که عنصر را به زاویه‌ای مشخص به دور محور Y می‌چرخاند:
مثال
#myDiv {
transform: rotateY(130deg);
}
تابع rotateZ()
rotateZ() روشی برای چرخش عنصر به زاویه‌ای مشخص به دور محور Z است:
مثال
#myDiv {
transform: rotateZ(90deg);
}
ویژگی‌های تبدیل CSS
در جدول زیر تمام ویژگی‌های تبدیل 3D لیست شده‌اند:
| ویژگی | توضیح |
|---|---|
| transform | تبدیل 2D یا 3D را به عنصر اعمال کنید. |
| transform-origin | اجازه می‌دهد که موقعیت عنصر تبدیل شده را تغییر دهید. |
| transform-style | تعریف اینکه عنصرهای درونی چگونه در فضای 3D نمایش داده می‌شوند. |
| perspective | تعریف اثر دیدی عنصر 3D. |
| perspective-origin | تعریف موقعیت پایین عنصر 3D. |
| backface-visibility | تعریف اینکه آیا عنصر در صورت عدم روبرو بودن با صفحه قابل مشاهده است یا خیر. |
روش‌های تبدیل CSS 3D
| تابع | توضیح |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
تعریف تبدیل 3D، از طریق استفاده از ماتریس 4x4 با 16 مقدار. |
| translate3d(x,y,z) | تعریف تبدیل 3D. |
| translateX(x) | تعریف تبدیل 3D، تنها از مقادیر محور X استفاده می‌کند. |
| translateY(y) | تعریف تبدیل 3D، تنها از مقادیر محور Y استفاده می‌کند. |
| translateZ(z) | تعریف تبدیل 3D، تنها از مقادیر محور Z استفاده می‌کند. |
| scale3d(x,y,z) | تعریف تبدیل بزرگ‌کنی 3D. |
| scaleX(x) | تعریف تبدیل بزرگ‌کنی 3D، از طریق دادن یک مقدار محور X. |
| scaleY(y) | تعریف تبدیل بزرگ‌کنی 3D، از طریق دادن یک مقدار محور Y. |
| scaleZ(z) | تعریف تبدیل بزرگ‌کنی 3D، از طریق دادن یک مقدار محور Z. |
| rotate3d(x,y,z,angle) | تعریف چرخش 3D |
| rotateX(angle) | تعریف چرخش 3D در محور X |
| rotateY(angle) | تعریف چرخش 3D در محور Y |
| rotateZ(angle) | تعریف چرخش 3D در محور Z |
| perspective(n) | تعریف دیدگاه نقطه دید 3D عنصر تغییرات |
- صفحه قبلی تغییرات 2D CSS
- صفحه بعدی گذر CSS
