حمیدرضا سلیمیان

بلاگ شخصی حمیدرضا سلیمیان

دسته بندی مقالات
باهم در شبکه های اجتماعی !

معرفی css3 - transform

معرفی css3 - transform
چیزایی که توی این مقاله می خونیم : اول یک توضیح اولیه درباره خود ویژگی transform بعدش به مقادیر یا بهتر بگم توابعش می پردازیم هم توابع دوبعدی و هم توابع سه بعدیشون و در آخرم یه سری نکات و تجربیات کوچیک

transform

یک ویژگی css که باهاش می تونید شکل شمایل یک المان رو تغییر بدید !
لیست مقادیر (توابع) که این ویژگی می تونه بگیره

transform: none

transform: translate(30px, 15%)
transform: translateX(3em)
transform: translateY(3in)
transform: translateZ(9px)
transform: translate3d(30px, 15%, 3em)

transform: scale(2, 0.4)
transform: scaleX(2)
transform: scaleY(0.4)
transform: scaleZ(0.5)
transform: scale3d(1.5, 1.6, 0.4)

transform: rotate(0.8turn)
transform: rotateX(30deg)
transform: rotateY(50deg)
transform: rotateZ(10deg)
transform: rotate3d(1, 3.0, 4.0, 15deg)

transform: skewX(35deg)
transform: skewY(1.08rad)


transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)


transform: perspective(25px)

transform: translateX(30px) rotate(10deg) translateY(25px)

همونطور که توی خط اخر می بینید می تونید چندی تابع رو با هم ادغام کنید برای این کار کافیه بین تابع ها یک فاصله بزارید
خوب با این توضیح کامل و جامع ! میریم سراغ توابع :

translate

انتقال المان به چپ راست یا بالا پایین . به صورتی که پارامتر اول اندازه انتقال به راست (مقدار منفی انتقال به چپ) و پارامتر دوم اندازی انتقال به پایین (مقدار منفی انتقال به بالا) البته این پارامتر دوم اختیاریه
مقدار پارامتر ها موتونه به px em و یا به درصد باشه
تابع translateX به صورت جداگانه انتقال به راست یا چپ و translateY به صورت جداگانه انتقال به بالا یا پایین هم وجود دارندr
transform: none
transform: translate(60px, 35%)
transform: translateY(-90px)

برای فضای سه بعدی نیز تابع translate3d تعریف می شود که سه پارامتر به ترتیب : فاصله از محور x , فاصله از محور y , فاصله از محور z میگیرد . تابع translateZ نیز جداگانه برای فاصله از محور z تعریف می شودr برای فضای سه بعدی مکعب زیر را در نظر میگیریم
transform: translate3d
1
2
3
4
5
6
// some code

.front-1{
transform:translateZ(50px);
}
.back-2{
transform:translateZ(-50px)
}

// some code
همانطور که می بینید المان شماره 1 از محور z 50px فاصله گرفته و المان شماره 2 50px از محور z عقب تر رفته است . بقیه المان هاهم مانند المان 1 50px جلوتر است فقط چرخیده شده اندr
شاید سوال پیش بیاد که چه فرقی با ویژگی های top bottom right left توی css داره ? باید بگم در ظاهر هیچ ولی موقعی که توی حالت ها انیمیشنی مانند keyframe یا :hover قرار بگیره خودشو نشون می ده و بدون اینکه روی المان دیگه ای تاثیر بزاره تغییر پیدا می کنه و روان تر هم در مرورگر ها اجرا می شه ( این مقاله توضیح داده
اگر مثل من هم حافظه درست حسابی ندارید حواستون باشه که مفاهیم transform و translate و transition که بیشتر موقه ها هم باهم کاربرد بپیدا می کنن رو اشتباه نگیرید

scale

بزرگ یا کوچک کردن المان .دو تا پارامتر میگیره اولی مقدار کشیده شدن افقی و دومی مقدار کشیده شدن عمودی ! و از نوع عددی که واحد هم نداره و در واقع ظریب محسوب می شه . برای مثال scale(2,0.4) یعنی المان رو به صورت عرضی 2 برابر بزرگ کن و ارتفاع اون رو به 4 دهم حالت اولیه ببر و در واقع یعنی کوچکش کن
اگر پارامتر اول دوم ذکر نشه مقدارش برابر پارامتر اول میشه
transform: scale(1) = پیشفرض
Salimian
transform: scale(2, 0.7)
Salimian

و برای فضای سه بعدی از تابع scale3d استفاده می شه که سه پارامتر برای محور های x , y ,z داره . اما سوال اینجاست مگه اون المان ما روی محور z حجم داره که بخواد از اون بعد کشیده بشه ؟!! این سوال رو باید از w3c پرسید ... احتمالا برای آینده در نظرش گرفتن . چون الان این تابع برای محور z مثل یک ضرب کننده عمل می کنه . یعنی مقدارش ضرب در مقدار translateZ میشه . شکل زیر رو نگاه کنید
element 1: transform: scale3d(1,1,1);
1
2
3
4
5
6
element 1: transform:scale3d(1,1,1) translateZ(20px)
1
2
3
4
5
6
element 1: transform:scale3d(1,1,2) translateZ(10px)
1
2
3
4
5
6

همونظور که توی شکل میبینید الامان یک توی دو شکل آخر به یک اندازی به عقب رفته در حالی که translateZ انها با هم متفاوته . نکته ای که هست اینکه برای ادغام باید تابع scale3d رو اول بنویسید چون مرورگر توابع ویژگی transform رو از اخر اعمال می کنه r

rotate

همونطور که از اسمش پیداست باعث چرخش ساعت وار یک المان میشه . توی حالت پیش فرض مرکز چرخش ،مرکز المان هست.. مقادیرش هم می تونن اعداد مثبت و منفی از واحد درجه (deg) و دور (turn) باشندr
اگر بخایم فضا رو 3 بعدی فرض کنیم تابع rotate چرخش حول محور Z هست پس با دستور rotateZبرابر هست . تابع rotateX حول محور x و تابع rotateY حول محور Y المان رو چرخش میده
transform: rotate(0.8turn)
Salimian
transform: rotate(50deg)
Salimian
transform: rotateX(30deg)
Salimian
transform: rotateY(30deg)
Salimian
transform: rotateZ(30deg)
Salimian

skew

skew کردن شکل !!! ... مثل تابع scale این تابع هم دو پارامتر میگیره : اولی skew افقی و دومی skew عمودی . اگر هم دومی نوشته نشه مقدارش برابر پارامتر اول محسوب می شه
transform: skew(30deg)
Salimian
transform: skewY(35deg)
Salimian

چند نکته ...

مرورگری به نام اینترنت اکسپلورر

این ویژگی transform از نسخه 9 به بعد اینترنت اکسپلورر پشتیبانی میشه . توی نسخه 9 هم باید از پیشوند -ms استفاده کنید . برای نسحه زیر 9 باید از فیلتر ها استفاده کنید

transform-origin

همانطور که قبلا گفتم ویژگی transform به مرکز المان اعمال می شه . به طور مثال وقتی از rotate استفاده می کنید مرکز المان چرخش پیدا می کنه . با ویژگی transform-origin می تونید بگبد کجای اون المان مرکز تغیرات برای ویژگی transform باشه . برای مثال شکل ها زیر رو در نظر بگیرید
transform-origin: center : default
Salimian
transform-origin: left top
Salimian

این ویژگی دو مقدار میگیره مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی و می تونه left | center | right | top | bottom باشه یا مقدار عددی به درصد
نام
ایمیل
متن نظر
عبارت داخل تصویر
 
رویا
۱۳۹۵/۰۲/۰۱ ۰۰:۰۰
سلامبرای ساخت منوی پایین این سایت : اول منو رو میسازیم و بعد در حالت hover براش display:block رو قرار میدیم؟ لینک
▬▬ حمید رضا سلیمیان
۱۳۹۵/۰۲/۱۹ ۱۰:۳۵
سلام . شما می تونید از ویژگی TranslateY از Transform استفاده کنید که در حالت اول مقدار منفی داره و در حالت Hover مقدار مثبت