با استفاده از تابع matrix که برای ویژگی transform تعیین می شود می توان کارهایی از قبیل تغییر شکل, مکان و وضعیت یک عنصر را بوسیله یک ماتریس در فضای دو بعدی انجام داد. مثلا اگر داشته باشیم: transform: rotate(80deg) translate(50px,25px) skewX(10deg); معادلش یک ماتریس دو بعدی به صورت زیر خواهد بود: transform: matrix(0.173648, 0.984808, […]
transform-origin
از ویژگی transform-origin برای تعیین مبدا مختصاتی تغییر شکل, مکان و یا وضعیت عناصر استفاده می شود. مثلا در مورد چرخاندن یک عنصر, اگر مبدا مختصاتی آن عنصر تغییر پیدا کند نتیجه تغییر چرخش متفاوت خواهد بود. تصویر زیر این موضوع را بهتر بیان می کند. توجه داشته باشید که نقطه سیاه مبدا مختصات عنصر […]
()skewY
با استفاده از تابع skewY که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید. می توانید اینطور تصور کنید زمانی که زاویه این تابع مثبت است راس بالا سمت چپ مستطیل و راس پایین سمت راست آن در جهت مخالف […]
()skewX
با استفاده از تابع skewX که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید. می توانید اینطور تصور کنید زمانی که زاویه این تابع مثبت است راس بالا سمت چپ مستطیل و راس پایین سمت راست آن در جهت مخالف […]
()skew
با استفاده از تابع skew که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی به صورت کج یا مورب تغییر شکل دهید. می توانید اینطور تصور کنید که دو راس رو به روی یک مستطیل را گرفته و در جهت مخالف هم بکشید. در نتیجه مستطیل تبدیل به […]
()rotate
با استفاده از تابع rotate که برای ویژگی transform تعیین می شود می توانید یک عنصر را در فضای دو بعدی بچرخانید. این چرخش بر اساس زاویه ای که برای تابع rotate تعیین می شود صورت می گیرد. و گردش دور مبدایی که بوسیله ویژگی transform-origin تنظیم شده است, انجام خواهد شد. زاویه مثبت برای […]
scaleY
با استفاده از تابع scaleY که برای ویژگی transform تعیین می شود می توان یک عنصر را در راستای محور Y بزرگ یا کوچک کرد. این تابع یک مقدار بدون واحد می گیرد. اگر مقدار بزرگتر از 1 باشد عنصر در راستای محور Y بزرگ می شود, اگر مقدار برابر یک باشد عنصر تغییر اندازه […]
()scaleX
با استفاده از تابع scaleX که برای ویژگی transform تعیین می شود می توان یک عنصر را در راستای محور X بزرگ یا کوچک کرد. این تابع یک مقدار بدون واحد می گیرد. اگر مقدار بزرگتر از 1 باشد عنصر در راستای محور X بزرگ می شود, اگر مقدار برابر یک باشد عنصر تغییر اندازه […]
()scale
با استفاده از تابع scale که برای ویژگی transform تعیین می شود می توان یک عنصر را در ظاهر بزرگ یا کوچک کرد. این تابع دو مقدار x و y می گیرد که این مقادیر بدون واحد هستند و مقدار x موجب تغییر اندازه در راستای محور X و مقدار y موجب تغییر اندازه در […]
()translateY
با استفاده از تابع translateY که برای ویژگی transform تعیین می شود می توان یک عنصر را در فضای دو بعدی در راستای محور Y جابجا کرد. به عنوان نمونه در مثال زیر عنصر 100 پیکسل به سمت پایین حرکت می کند: .element { transform: translateY(100px); } از واحدهای دیگری مثل em و rem و […]