در این مقاله سه متد جابه جایی سه بعدی (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
|
معرف نمایش و یا عدم نمایش عنصر در زمان روبه رو نبودن با صفحه نمایش است.
|