مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی . قصد داریم به آموزش توابع جابه جایی حرکات عناصر سه بعدی در css بپردازیم. css3 به شما این اجازه را می دهد. که حالت و محل قرارگیری عناصر html خود را با استفاده از توابع جا به جایی ۳ بعدی ، تنظیم کنید. در این توابع شما می توانید محل و حالت قرار گرفتن. عناصر html قالب وب سایت خود را را به نسبت محور های x ، y و z تنظیم کنید.
تغییر و تحول (transformation) در css ، افکت هایی هستند. که امکان تغییر شکل ، اندازه و محل قرارگیری عناصر html. را با استفاده از توابع . و کدهای css فراهم می کند. در css 3 این قابلیت برای عناصر دوبعدی و سه بعدی پشتیبانی می شود.
در پست های قبلی همچنین توابع انتقال و جابه جایی عناصر دو بعدی در css را بصورت کامل و با مثال های css مورد بررسی قرار دادیم.
در ادامه این پست آموزشی به موضوع توابع حرکات عناصر سه بعدی در css پرداخته ایم.
جا به جایی حرکات عناصر سه بعدی در css
توابع جا به جایی و حرکات عناصر سه بعدی در css
در این مطلب ، در مورد جابه جایی و حرکات عناصر سه بعدی در css به آموزش توابع زیر پرداخته ایم:
- () rotate X
- () rotate Y
- () rotate Z
تابع () rotate X
تابع () rotate X ، یک عنصر HTML را به مقدار پرامتری که بر حسب درجه دریافت می کند. در جهت محور x می چرخاند.
مثال:
مثال : تابع rotateX
| #myDiv { -webkit-transform: rotateX(150deg); /* Safari */ transform: rotateX(150deg); } |
تابع () rotate Y
تابع () rotate Y ، یک عنصر HTML را به مقدار پرامتری که بر حسب درجه دریافت می کند. در جهت محور Y می چرخاند.
مثال:
مثال : تابع rotateY
| #myDiv { -webkit-transform: rotateY(130deg); /* Safari */ transform: rotateY(130deg); } |
تابع () rotate Z
تابع () rotate Z ، یک عنصر HTML را به مقدار پارامتری که بر حسب درجه دریافت می کند. در جهت محور Z می چرخاند.
مثال:
مثال : تابع rotateZ
| #myDiv { -webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); } |
تمام خصوصیات transform در CSS
| خصوصیت | توضیحات |
|---|
| transform | یک تبدیل ۲D یا ۳D به یک عنصر را اعمال می کند. |
| transform-origin | به شما اجازه می دهد موقعیت عناصر تبدیل شده را تغییر دهید. |
| transform-style | مشخص می کند که چگونه عناصر تودرتو در فضای سه بعدی ارائه می شوند. |
| perspective | حالت perspective (نمای دید در دنیای واقعی) را در عناصر سه بعدی مشخص می کند. |
| perspective-origin | موقعیت پایین عناصر ۳D را مشخص می کند. |
| backface-visibility | تعریف می کند که آیا عنصر باید در هنگام دیدن صفحه نمایش قابل مشاهده باشد یا نه. |
متدهای سه بعدی transform
| تابع | توضیحات |
|---|
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | یک تبدیل ۳D را با استفاده از یک ماتریس ۴×۴ از ۱۶ مقدار تعریف می کند. |
| translate3d(x,y,z) | یک انتقال انتقال را تعریف می کند. |
| translateX(x) | یک انتقال سه بعدی را با استفاده از تنها مقدار برای محور X تعریف می کند. |
| translateY(y) | یک انتقال سه بعدی را با استفاده از تنها مقدار محور Y تعریف می کند. |
| translateZ(z) | یک انتقال سه بعدی را با استفاده از تنها مقدار محور Z تعریف می کند. |
| scale3d(x,y,z) | تعریف یک مقیاس ۳D. |
| scaleX(x) | با یک مقدار برای محور X یک مقیاس ۳D را تعریف می کند. |
| scaleY(y) | با یک مقدار برای محور Y یک مقیاس ۳D را تعریف می کند. |
| scaleZ(z) | با یک مقدار برای محور Z یک مقیاس ۳D را تعریف می کند. |
| rotate3d(x,y,z,angle) | یک چرخش ۳D را تعریف می کند. |
| rotateX(angle) | چرخش ۳D را در امتداد محور X تعریف می کند |
| rotateY(angle) | یک چرخش ۳D را در امتداد محور Y تعریف می کند. |
| rotateZ(angle) | یک چرخش ۳D را در امتداد محور Z تعریف می کند. |
| perspective(n) | یک نمای perspective را برای یک عنصر تبدیل ۳D تعریف می کند. |
کلام آخر
یکی از قابلیت های جالب و پرکاربرد در CSS توابع جابه جایی حرکات عناصر سه بعدی در css می باشد، این توابع اجازه جا به جایی ، تغییر شکل و اندازه ی عناصر HTML را با استفاده از کدهای CSS به شما می دهند، و در مواردی از جمله ایجاد انیمیشن در عناصر HTML کاربرد وسیعی دارند.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
