تبدیل های سه بعدی CSS (3D Transforms)
در این راهنما با «تبدیل های سه بعدی CSS» آشنا می شوید. ویژگی transform می تواند بر عناصر، تبدیل دو بعدی یا سه بعدی اعمال کند؛ بنابراین می توانید آن ها را بچرخانید، جابه جا کنید، مقیاس دهید یا اریب کنید.
توابع تبدیل های سه بعدی CSS
برای سه بعدی کردن محتوا، از توابع محور-محور زیر استفاده می شود:
- rotateX() — چرخش حول محور X
- rotateY() — چرخش حول محور Y
- rotateZ() — چرخش حول محور Z
نکته: برای مشاهده عمق واقعی، معمولاً به perspective در والد و تنظیم transform-style نیاز دارید.
تابع rotateX() در تبدیل های سه بعدی CSS
تابع rotateX() عنصر را بر حسب درجه، حول محور X می چرخاند:
#myDiv { transform: rotateX(150deg); }تابع rotateY()
تابع rotateY() چرخش حول محور Y را اعمال می کند:
#myDiv { transform: rotateY(150deg); }تابع rotateZ()
تابع rotateZ() چرخش حول محور Z را انجام می دهد:
#myDiv { transform: rotateZ(90deg); }هشدار: ترتیب چند تبدیل در یک transform اهمیت دارد و نتیجه بصری را تغییر می دهد.
ویژگی های مرتبط با تبدیل های سه بعدی CSS
برخی ویژگی های پشتیبان در سه بعدی:
- transform-origin — تعیین نقطه مرجع تبدیل
- transform-style — نحوه رندر فرزندان در فضای سه بعدی
- perspective و perspective-origin — عمق و نقطه دید
- backface-visibility — نمایش یا پنهان سازی پشت عنصر
برای ادامه یادگیری، این بخش ها را ببینید: تبدیل های دو بعدی CSS و ترنزیشن های CSS.