با استفاده از تابع rotateY که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی دور محور Y بچرخانید. این تابع یک زاویه می گیرد که میزان چرخش دور محور Y را نشان می دهد. زاویه مثبت باعث می شود که عنصر در جهت عقربه های ساعت دور این […]
()rotateX
با استفاده از تابع rotateX که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی دور محور X بچرخانید. این تابع یک زاویه می گیرد که میزان چرخش دور محور X را نشان می دهد. زاویه مثبت باعث می شود که عنصر در جهت عقربه های ساعت دور این […]
()rotate3d
با استفاده از تابع rotate3d که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای سه بعدی بچرخانید. برای این تابع باید چهار مقدار تعیین شود که سه مقدار اول برداری را در فضای سه بعدی می سازند که عنصر به اندازه زاویه ای که به عنوان مقدار چهارم به این […]
()matrix3d
با استفاده از تابع matrix3d که برای ویژگی transform تعیین می شود می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای سه بعدی انجام داد. مثلا اگر داشته باشیم: transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px); معادلش یک ماتریس چهار در چهار بعدی به صورت زیر […]
background-clip
ویژگی background-clip تعیین می کند که پس زمینه عنصر در کدام ناحیه و یا ناحیه ها ترسیم شود. هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند. در حالت […]
mix-blend-mode
از ویژگی mix-blend-mode برای مشخص کردن حالت blend-mode در مورد آمیختن یک عنصر با محتوای پشت سر آن (backdrop) استفاده می شود. اول چند مفهوم را با استفاده از تصویر زیر بررسی می کنیم: source عنصر مورد نظر ما می باشد که می خواهیم ویژگی mix-blend-mode را بر روی آن اعمال کنیم. destination عنصر و […]
display
از ویژگی display برای تعیین نوع چارچوب یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع چارچوب هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند. در CSS دو نوع چارچوب اصلی وجود دارند: inline و block. inline اگر عنصری دارای چارچوبی از […]
()matrix
با استفاده از تابع matrix که برای ویژگی transform تعیین می شود می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای دو بعدی انجام داد. مثلا اگر داشته باشیم: transform: rotate(80deg) translate(50px,25px) skewX(10deg); معادلش یک ماتریس دو بعدی به صورت زیر خواهد بود: transform: matrix(0.173648, 0.984808, […]
transform-origin
از ویژگی transform-origin برای تعیین مبدا مختصاتی تغییر شکل, مکان و یا وضعیت عناصر استفاده می شود. مثلا در مورد چرخاندن یک عنصر, اگر مبدا مختصاتی آن عنصر تغییر پیدا کند نتیجه تغییر چرخش متفاوت خواهد بود. تصویر زیر این موضوع را بهتر بیان می کند. توجه داشته باشید که نقطه سیاه مبدا مختصات عنصر […]
()skewY
با استفاده از تابع skewY که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید. می توانید اینطور تصور کنید زمانی که زاویه این تابع مثبت است راس بالا سمت چپ مستطیل و راس پایین سمت راست آن در جهت مخالف […]