جابه جایی سه بعدی (3D) در CSS3

10 / 10
از 1 کاربر

در این مقاله سه متد جابه جایی سه بعدی (3D) در CSS3 زیر را برای شما کاربران عزیز در طراحی سایت شرح می دهیم.

• rotateX() : ویژگی rotateX() ، یک عنصر را در حول محور X ها با توجه به درجه داده شده به آن می چرخاند.

div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}

• rotateY() : ویژگی rotateY() ، یک عنصر را در حول محور Y ها با توجه به درجه داده شده به آن می چرخاند.

div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}

• rotateZ() : ویژگی rotateZ() ، یک عنصر را در حول محور Zها با توجه به درجه داده شده به آن می چرخاند.

div {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}

جدول زیر تمام ویژگی های جابجایی سه بعدی را در خود جای داده است.

 

ویژگی

 

توضیحات

 

Transform

ایجاد یک دگرگونی 2D یا 3D در یک عنصر

transform-origin

این امکان را به شما می دهد تا موقعیت یک عنصر تغییر شکل یافته را تغییر دهید

transform-style

چگونگی قرار گرفتن عناصر رندر شده در فضای سه بعدی را مشخص می کند

perspective

چشم اندازی از چگونگی نمایش عناصر سه بعدی را مشخص می کند.

perspective-origin

مشخص کننده موقعیت پایین عناصر 3D است

backface-visibility

معرف نمایش و یا عدم نمایش عنصر در زمان روبه رو نبودن با صفحه نمایش است.

ارسال نظر و نظرات ثبت شده