خاصیت Transition در CSS
مبحث هجدهم آموزش CSS3 : خاصیت Transition در CSS
با استفاده از خاصیت Transition در CSS که تازه وارد دنیایی وب شده میتوانید افکت های زیبای ایجاد کنید. البته قبلاً برای انجام این امکان ضرورت به جی کیوری داشتید اما حالا با استفاده از CSS3 میتوانید به سادگی دیزاین را تطبیق کنید.
با Transform شما میتوانید عناصرتان را بچرخانید ، بزرگ یا کوچک نمایید و امثال اینها.
قاعده دستوری خاصیت Transform به شکل زیر است:
Transform: effect ( )
خاصیت Transform در CSS مقادیر زیر را دارا میباشد:
Translate
با استفاده از این مقدار شما میتوانید عنصر مورد نظر تانرا بصورت افقی و عمودی جابجا نمایید. این مقدار تنها دو قیمت را میپذیرد که یک قیمت عنصر را به شکل افقی جابجا میکند و دیگر قیمت عنصر را به شکل عمودی جابجا میکند.
قیمت های مقدار Translate :
(TranslateX(valueX : این قیمت عنصر را به جهت افقی جابجا میکند.
(TranslateY(valueY : این قیمت عنصر را به جهت عمودی جابجا میکند.
Transform : translate (valueX,valueY)
یعنی
Transform : translate (50px, 70px)
حالا بعد از استفاده از دستور بالا عنصر ما از لحاظ افقی در قسمت 60PX و از لحاظ عمودی در قسمت 80PX قرار میگیرد.
مقدار () Rotate
با استفاده از این مقدار خاصیت Transform شما میتوانید عنصر مورد نظرتان را بچرخانید. البته واحد که با قیمت این مقدار استفاده میشود deg میباشد که کلمه deg نمایندگی از درجه میکند. برای نحوه استفاده به مثال زیر توجه نمایید:
Transform : rotate (deg) ;
یعنی
Transform : (90deg)
مقدار RotateX (180deg)
این قیمت عنصر را بصورت عمودی به اندازه ۱۸۳ درجه میچرخاند و عنصر را به حالت عمودی کاملاً سر چپه میکند.
مثال:
Transform : rotatex (180deg) ;
حالا نتیجه دستور بالا به شکل زیر است:
RotateY(180)
این قیمت عنصر را بصورت افقی به اندازه ۱۸۳ درجه میچرخاند و عنصر را به حالت افقی کاملاً سر چپه میکند.
مثال:
Transform : rotatey(180deg) ;
حالا نتیجه دستور بالا به شکل زیر است:
() Scale
با استفاده از این مقدار خاصیت Transform شما میتوانید ابعاد عنصرتان را بصورت عمودی و افقی افزایش دهید.
این مقدار دارای دو قیمت میباشد ValueX و ValueY
مثال: در این مثال ما میخواهیم ابعاد تصویر را از لحاظ افقی ۲ برابر و از لحاظ عمودی ۳ برابر بزرگ نمایم.
Transform : scale (2 , 3) ;
مقدار () Skew
با استفاده از این مقدار خاصیت Transform شما میتوانید عنصر مورد نظر تان را به دو حالت (افقی و عمودی) بصورت ۳ بعدی بچرخانید.
اگر قیمت این درجه مثبت باشد عنصر به سمت راست و اگر قیمت منفی باشد عنصر به سمت چپ میچرخد.
مثال :
Transform : skew (10deg , 10deg) ;
نتیجه :
شما نیز میتوانید به صورت جداگانه عنصر را بچرخانید یعنی میتوانید به تنهایی به صورت افقی بچرخانید و یا میتوانید به صورت عمودی بچرخانید.
() SkewX
این قیمت عنصر را در حالت افقی میچرخاند.
() SkewY
این قیمت عنصر را در حالت عمودی میچرخاند.
دیدگاه ها