ترجمه 3D CSS

ترجمه 3D CSS

CSS 3D تبدیلات کو بھی پشتیبند کرتا ہے۔

پرچم موس را پرت کریں اس عناصر پر، تا فرق بین تبدیلات 2D اور 3D دیکھ سکتے ہیں:

چرخش 2D
چرخش 2D

چرخش 3D

  • transform

در این فصل، شما در مورد ویژگی‌های زیر یاد خواهید گرفت:

پشتیبانی مرورگر

ویژگی شمارهای جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی می‌کند. 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.