آموزش جامع سه بعدی در css

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

برای پیاده سازی سه بعدی در دنیای وب چندین راه حل وجود دارد که معروف ترین آنها استفاده از WebGL می باشد, اما کار با آن آسان نیست. مثلا ساخت یک مکعب ساده با استفاده از WebGL بصورت خام شاید صدها خط جاوااسکریپت نیاز داشته باشد. علاوه بر بحث دشواری استفاده از آن برای ساخت […]

()translateZ

با استفاده از تابع translateZ که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای سه بعدی در جهت محور Z جابجا کرد. مقداری که این تابع می پذیرد می تواند واحد طولی یا درصدی داشته باشد. و این مقدار باعث حرکت عنصر در راستای محور Z می شود. در زیر […]

()translate3d

با استفاده از تابع translate3d که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای سه بعدی حرکت داد. این تابع نسخه سه بعدی تابع ()translate می باشد که با استفاده از بردار [tx, ty, tz] باعث تغییر مکان عنصر می شود که در اینجا tx انتقال در راستای محور X […]

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

امروزه در دنیای وب تغییر شکل و مکان عناصر از اهمیت زیادی برخوردار است. با استفاده از چنین قابلیت هایی و همینطور انیمیشن ها و ترنزیشن ها صفحات وب و نرم افزارهای کاربردی کاربر پسندتر و پویاتر می شوند و همینطور شادابی خاصی خواهند داشت. با استفاده از سی اس اس می توانیم عناصر را […]

()translateY

با استفاده از تابع translateY که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در راستای محور Y جابجا کرد. به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت پایین حرکت می کند: .element { transform: translateY(100px); } از واحدهای دیگری مثل em و rem و […]

()translateX

با استفاده از تابع translateX که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در جهت محور X جابجا کرد. به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت راست حرکت می کند: .element { transform: translateX(100px); } از واحدهای دیگری مثل em و rem و […]

()translate

با استفاده از تابع translate که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی جابجا کرد. این تغییر مکان توسط بردار [x,y] انجام می شود که x تغییر مکان در راستای محور X و y در راستای محور Y است. به عنوان نمونه در مثال زیر عنصر 100 […]

transform

با استفاده از ویژگی transform می توانید شکل, مکان و یا وضعیت یک عنصر را تغییر دهید. این تغییر می تواند دو بعدی و یا سه بعدی باشد. مقدار این ویژگی می تواند none باشد که به این معنی است که هیچ تغییری انجام نشود. و یا می توان یک و یا تعدادی از توابع […]