پارالکس در سی اس اس

ایجاد افکت پارالکس در CSS

در این آموزش با نحوه ساخت افکت پارالکس در سی‌اس‌اس بدون استفاده از جاوااسکریپت و با استفاده از توابع سه بعدی transform آشنا خواهیم شد.

ویژگی transform در SVG

عناصر SVG نیز مثل عناصر HTML می توانند توسط توابع rotate، translate، scale و غیره دچار تغییر شکل، مکان و دگرگونی های مختلف شوند.

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

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

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

transform-style

ویژگی transform-style تعیین می کند که فرزندان یک عنصر در فضای سه بعدی عنصر نگهدارنده یا همان پدرشان بمانند یا حالت دو بعدی داشته باشند. فرض کنید می خواهید فرزندان عنصری که در فضای سه بعدی می باشد را نیز در فضای سه بعدی به حرکت در بیاورید. این ویژگی حالت سه بعدی عنصر پدر […]

backface-visibility

ویژگی backface-visibility تعیین می کند زمانی که عنصر در فضای سه بعدی توسط ویژگی transform حرکت داده می شود پشت آن قابل مشاهده توسط بیننده باشد یا نه. در حالت پیشفرض اگر عنصری در فضای سه بعدی بچرخد پشت آن عنصر نیز قابل مشاهده است اما اگر مقدار hidden را برای این ویژگی تنظیم کنیم, […]

perspective-origin

با استفاده از ویژگی perspective-origin می توان موقعیتی که بیننده در آن فضای سه بعدی را مشاهده می کند را تعیین کرد. نقطه ای که این ویژگی بر اساس محورهای X و Y تعیین می کند, توسط ویژگی perspective به عنوان نقطه گریز عنصر در فضای سه بعدی مورد استفاده قرار می گیرد. نقطه گریز […]

()matrix3d

با استفاده از تابع matrix3d که برای ویژگی transform تعیین می شود می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای سه بعدی انجام داد. مثلا اگر داشته باشیم: transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px); معادلش یک ماتریس چهار در چهار بعدی به صورت زیر […]

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

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

()matrix

با استفاده از تابع matrix که برای ویژگی transform تعیین می شود می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای دو بعدی انجام داد. مثلا اگر داشته باشیم: transform: rotate(80deg) translate(50px,25px) skewX(10deg); معادلش یک ماتریس دو بعدی به صورت زیر خواهد بود: transform: matrix(0.173648, 0.984808, […]

transform-origin

از ویژگی transform-origin برای تعیین مبدا مختصاتی تغییر شکل, مکان و یا وضعیت عناصر استفاده می شود. مثلا در مورد چرخاندن یک عنصر, اگر مبدا مختصاتی آن عنصر تغییر پیدا کند نتیجه تغییر چرخش متفاوت خواهد بود. تصویر زیر این موضوع را بهتر بیان می کند. توجه داشته باشید که نقطه سیاه مبدا مختصات عنصر […]