برای دسترسی به مقالات حرفه ای ثبت نام کنید
خانه » دسته‌بندی نشده » آشنایی با عنصر transform در CSS3

آشنایی با عنصر transform در CSS3

یکی از امکانات بسیار مورد توجه css3 امکان transform هست که در ایران بسیار مورد توجه طراحان قرار گرفته است. به طور مثال شما سایت هایی را دیده اید که وقتی موس تان را بر روی تصاویر و یا بعضی قسمت های آنها میبرید کمی آن قسمت یا تصویر تکان میخورد , یا کج میشود , می چرخد و … . بله درست حدس زدید این حرکات دقیقا به موجب همین transform هست . اما اگر باز هم متوجه نشدید کافیست موس خودتان را بر روی هر کدام از هشت نمونه زیر قرار دهید تا انواع transform را در css3 مشاهده نمایید . در ادامه مطلب به اموزش استفاده این عنصر css3 خواهیم پرداخت …

test1
test2
test3
test4
test5
test6
test7
test8


شما در ۸ نمونه بالا با تمامی حالاتی که میتوان با این عنصر ایجاد کرد آشنا گردیدید . این ۸ نمونه نتیجه ۴ خاصیت متفاوت در عنصر transform است..
خوب در ابتدا با شکل تئوریک transfoem آشنا شویم …

و مثل همیشه برای نمایش درست این عنصر CSS3 در تمام مرورگر های پشتیبان کننده از آن باید از کد زیر استفاده کرد:

که اگر این کد ها گذاشته نشه ممکنه توی مرورگرهای با هسته و موتور متفاوت این عنصر به درستی اجرا نشه … البته شما نیز به این موضوع توجه بکنید که منظور از گذاشتن <properties> در جلوی کدها به این دلیل است که میتوان در این قسمت از خاصیت های مختلف transform استفاده کرد , پس لطفا ادامه اموزش را به خوبی بخوانید …

  • خاصیت های مختلف transform

در transform چهار خاصیت متفاوت میتوان به کار برد . که در ادامه مطلب هرکدام از این خاصیت ها معرفی و روش استفاده و نمونه آن هایی از آن ها را بیان خواهیم کرد. البته یک نکته را فراموش نکنید . در تمامی نمونه های این قسمت , زمانی نمونه ها اجرا میشود که موس خودتان را روی آن ها نگه دارید . در مورد چگونه انجام دادن این کار بعدا در پستی جدا گانه توضیح خواهیم داد . تنها این نکته را متذکر می شوم که کد های هر کدام از قسمت هایی که گفته میشود را اگر به تنهایی به کار ببرید . تصویر یا کادرتان به شکل تنظیم شده نشان داده خواهد شد و به این شکلی که مثال ها هست نخواهد بود . البته در پایان آموزش یک فایل فشرده که کد تمامی نمونه های این آموزش در آن موجود است برای فهم و امتحان کردن شخصی برای دانلود شما عزیزان گذاشته خواهد شد.

  1. خاصیت scale : کار این خاصیت بزرگ یا کوچک کردن و یا به طور کل تغییر اندازه قسمت مورد نظر است . شما در ۸ نمونه اولیه با این خاصیت بر خورد کردید و برای یادآوری و درست متوجه شدن نیز دوباره دو نمونه در پایین خواهید دید تا درست متوجه شوید :
    test1
    test2

    همان طور که میبینید با بردن موس بر روی نمونه اول , کادر کوچک می شود و درنمونه دوم , کادر بزرگتر می شود.

    این خاصیت transform به شکل زیر نوشته میشود :

    که همون طور که مشاهده میکنید من در مثال بالا مقدار خاصیت scale رو معادل با “۱” قرار دادم این عدد یعنی قسمت مشخص شده هیچ تغییری نداشته باشه اما هر عددی که در این مقدار بگذارید اگر بزرگتر باشد به همان اندازه قسمت مشخص شده چند برابر خواهد شد و اگر کوچک تر باشد به همان اندازه قسمت مشخص شده کوچکتر خواهد شد . البته تجربه من حاکی بر این است تنها عددی که میتوان در این مقدار قرار داد میتواند بین ‘ ۰٫۱ تا ۲ ‘ باشد و در غیر این صورت قسمت مشخص شده به حالت نجومی بزرگ تر خواهد شد .

  2. خاصیت rotate : با این خاصیت میتوانید هر قسمتی را که میخواهید به چرخش در بیاورید . شما دو نمونه از این نوع خاصیت را برای درک بهتر مطلب گفته شده میتوانید ببینید :
    test3
    test4

    شما مشاهده میکنید با بردن موس روی هر یک از نمونه های ذکر شده , هر نمونه به یک طرف ۱۵ درجه میچرخند . قبل از دیدن روش نوشتن این خاصیت transform یک نکته دیگر رو که در جمله قبلم بود رو متذکر میشوم این خاصیت transform با واحد درجه که به انگلیسی ( deg ) نوشته میشود سنجیده میشود و باید از کلمه ( deg ) در جلوی عدد درجه چرخیدن استفاده کنید.

    این خاصیت transform نیز به شکل زیر نوشته میشود :

    که همون طور که مشاهده میکنید من در مثال بالا مقدار خاصیت rotate رو برابر با ( ۰deg ) قرار دادم یعنی هیچ تغییری در صورت گذاشتن این کد مشاهده نخواهد شد . شما به جای عدد ۰ میتوانید عددی بین ۱ تا ۳۸۰ یعنی یک چرخش کامل بگذارید . البته میتوانید به شکلی عدد را قرار دهید که عدد حداکثر بین -۱۸۰ تا +۱۸۰ باشد . هیچ تفاوتی این دو با هم نخواهد داشت.

  3. خاصیت translate : کار این خاصیت خیلی سادست هرجا که شما این کد را به کار ببرید میتوانید مکان قسمت مشخص شده را با تغییر اندازه x و y این خاصیت transform تغییر دهید .البته یک تذکر دیگر هم باید بگو این خاصیت با واحد پیکسل ( px ) سنجیده می شود . شما در زیر دو نمونه از این خاصیت را خواهید دید :
    test5
    test6

    همون طور که توی نمونه های بالا میبینید با بردن موی روی هر کادر به اندازه ۱۰ پیکسل به سمت مشخص شده در کد , کادر تغییر می کند .

    این خاصیت transform نیز به شکل زیر نوشته میشود :

    در کد بالا هر دو مقدار x و y معادل صفر پیکسل قرار گرفته است یعنی در حالت عادی هیچ تاثیری نخواهد داشت . شما با قرار دادن هر عددی در قسمت اول این خاصیت عدد x و هر عددی در قسمت دوم قرار دهید , عدد y تغییر خواهد کرد .

  4. خاصیت skew : تنظیم این خاصیت شکل اولیه قسمت مشخص شده به طور کل تغییر میکنه . این خاصیت هر قسمتی رو که بهش مرتبط بشه رو با توجه به تنظیمات خم و شکسته می کنه . الته این نکته فراموش نشود این خاصیت با مقدار درجه ( deg ) مشخص میشود . در زیر دو نمونه از آن را می توانید ببینید :
    test7
    test8

    همان طور که قابل مشاهده هست با حرکت موس به سمت نمونه های بالا آنها به شکل شکسته و خم شده به نمایش در می آیند

    این خاصیت transform نیز به شکل زیر نوشته میشود :

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

  • یک نکته مهم :

خوب حال که هر چهار خاصیت عنصر transform رو شرح دادیم یک موضوع کلی را متذکر شویم . اگر بخواهیم قسمتی را که مشخص کردیم . هر چهار خاصیت را دارا باشد و هر چهار خاصیت در قسمت مشخص شده نقش داشته باشد . باید از کد زیر استفاده کنیم

در حال عادی کد بالا هیچ تاثیری را در قسمت مشخص شده شما ایجاد نخواهد کرد و شما با توجه به اموزش چهار خاصیت transform میتوانید تغییراتی را که میخواهید اعمال شود را در لا به لای کد ایجاد کنید.

  • سازگاری با مرورگر ها :
  • موزیلا فایرفاکس : ۳٫۵+
    گوگل کروم : ۳٫۰+
    اینترنت ایکسپلورر : ۹+
    اپرا : ۱٫۵+
    سافاری : ۳٫۲+

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

با تشکر احمدیان آذر ۱۳۸۹

برچسب ها:

درباره حامد مظاهری

حامد مظاهری هستم، نویسنده و مدیر سایت والفا. همه تو نت من و به اسم "John Constantine" میشناسن. علاقه زیادی به گرافیک دارم و همچنین در حال یادگیری طراحی وب هستم. اینجا هم مطالبی و میزارم که خودم استفاده میکنم و به نظرم جالب و مفید هست. برای آشنایی بیشتر با من به پروفایلم سر بزنید: http://About.me/broodyjoker
  • http://www.blackwhite.persianblog.ir Amin

    سلام و خسته نباشید آموزش خوبی بود اما یه سوال من یک دکمه با css طراحی کردم حالا اگه بخوام اون دکمه رو ترنسفورم کنم باید کد رو کجا بذارم یه خورده بیشتر راهنمایی کنید خیلی مممنون

بازگشت به بالا