تفاوت transform با transiotion

[siros1983]

بریم سراغ اصل مطلب
آیا این دو با هم تفاوتی دارن؟
خب transform ها به دو صورت دو بعدی و سه بعدی هستن تا اینجا مشکلی نیست سوالم اینه که آیا خواص پایینی که مینویسیم مگر مربوط به همون transform نیست؟
transition-property
transition-duration
transition-timing-function
transition-delay

مگر این 4 تا برای همون transform استفاده نمیشه؟
این 4 تا خاصیت به تنهایی کارایی ندارن درسته؟ باید حتما از transform استفاده بشه؟
چطوریه یکی میتونه یه کوچولو توضیح بده؟

درضمن کسی لینکی برای اموزش سه بعدی transform ها داشت ممنون میشم فارسی باشه چ بهتر
میخوام توضیح بده بیشتر و البته مثال هم داشته باشه

[sinoser]

زیر دوتا لینک گذاشتم توش مثال هاش هست ولی قبش واستا توضیح بدم.
توی CSS خیلی از ویژگی ها مثل همین transition دو حالت داره . یکی تک تک و یک هم که اصلاحا بش می گن shorthand همه رو می تونی خلاصه توی یک ویژگی بنویسی. خلاصه بگم transition ویژگی ای هست که می تونه همه اون زیر مجموعه هاشو یهویی تو خودش جا بده ولی تک تکی ها نچ هر کی باید ویژگی خودشو داشته باشه. مثلا transition-duration طول مدت اجرای انیمیشن هست و نمی تونه مثلا مقداری بگیره که تاخیر برای انیمیشن ایجاد کنه (تاخیر رو باید با transition-delay جدا اعمال کنی ) اما هر دو این ها ور می تونی یهویی و توی یک ویژگی بذاری. (حالا اگر می خوای بدونی چرا این جور جدا کدن و مثل ادم یکیشو نذاشتن باید بگم , حالت شورت هند (یا همون خلاصه) کاربردش وقتی هست که می خوای انیمیشن بدی ولی جز همون خطی که داری اونو تعریف می کنی جای دیگه قرار نیست تغییری توی تعریفش صورت بگیره. ولی تکی تکی وقتی خوبه که مثلا توی توی یک کلاس چندتا از این ها رو می نویسی بعد واسه ای دی های مختلف مثلا طول مدت انیمیشن رو جدا و اختصاصی واسشون می نویسی).

http://www.w3schools.com/css/css3_3dtransforms.asp
http://www.w3schools.com/css/css3_2dtransforms.asp


اما تفاوت transform با transiotion
خب اولا باید بگم منم اوایل یادگیریم هی اینا رو قاطی می کردم.:لبخند::عصبانی++:
ولی بعد یاد میگیر. نیگاه transform یعنی تغییر. تو با این ویژگی می تونی روی المان هات زوم کنی , بچرخونیسون , جابهجاشون کنی و از این کارا (کرم بریزی روشون :بامزه: ).
اما برادر transition واسه ایجاد انیمیشنه همون جور که اول این مطلب گفتم. باش می تونی تغییر حالت ها رو به صورت انیمیشن اجرا کنی. مثلا hover شدن موس روی یک المان یک تغییر حالت هست. یا کلیک کردن روی یکی دکمه (active:). مثلا توی حالت عادی زدی width 100px بعد توی hover می نویسی width200 حالا بدون انیمیشن یهویی این 100 به 200 تغییر پیدا می کنه ولی با این برادرمون می تونی نرم و ملیح از 100 بری به 200.:متفکر:

خب الان اینو بگم نگی نگفتم. ما یه ویژگی دیگم داریم توی css که اون دیگه رسما انیمیشن هست.
http://www.w3schools.com/css/css3_animations.asp
با این می تونی بدون رخ دادن چیز و تغییر حالتی انیمیشن بنویسی. مثلا بگی یک باکس همش دور خودش بچرخه (اینقد بچرخه تا جونش بالا بیاد).

[siros1983]

ممنون sinoser (http://barnamenevis.org/member.php?268349-sinoser) عزیز
واقعا خیلی قشنگ وقت میزارید برای افراد مبتدی مثل من توضیح میدید
دمت گرم داداش:تشویق:


یه سوال: این تبدیلات دو بعدی که راحته و سه بعدی یکم امشب یاد گرفتم باید بیشتر روشون کار کنم
این تبدیلات روی متن ها اعمال نمیشه؟ مثلا روی تگ p یا امثال این؟

بعد یه سوال امکان استفاده همزمان وجود نداره؟
مثلا مینویسم

transform:rotate3d(1,0,0,180deg);
transform:scale3d(2,2,3);



اینجا فقط scale اتفاق میفته چطوری میتونم همزمان چندتا استفاده کنم مثلا اول چرخش بعد بزرگنمایی یا همزمان هم بچرخه و هم بزرگ بشه

[sinoser]

خواهش می کنم :قلب:

خب چرا می تونی ولی نه مستقیما روی متن یا رشته متنی , باید یک تگ رو که بعد داشته باشه و display اون هم block یا از این نوع ها که بُعد دارن و خطی نیستن (مثلا span نمیشه چون inline هست ولی p میشه چون block هست پیش فرض).

برای استفاده هم زمانم باید بگم بله میشه , اما نه این جور که تو نوشتی , این جوری که نوشی اونی اجرا میشه که در پایین تر نوشته شده (css کلا اینجوره چندتا بنویسی خطا نمیده ولی اخریه رو اجرا می کنه فقط ).
برای این کار باید همشو توی یکی بنویسی.
transform:rotate3d(1,0,0,180deg) scale3d(2,2,3);