آموزش خاصیت transform در سی اس اس در وبسایت | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

سلام. امروز با آموزشی کاربردی از CSS3 اومدم.
یکی از ویژگی هایی که در طراحی سایت ها بسیار کاربرد دارد خاصیت transform میباشد.
در خدمت شما هستم در وب سایت پاسخ وردپرس برای آشنایی با این ویژگی با من همراه باشید.

آموزش خاصیت transform در سی اس اس در وبسایت پاسخ وردپرس

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

آموزش خاصیت transform در سی اس اس

مقدار این ویژگی می تواند none باشد که به این معنی است که هیچ تغییری انجام نشود. و یا می توان یک و یا تعدادی از توابع زیر را به عنوان مقدار برای این ویژگی تعیین کرد.

لیست توابع دو بعدی:

[thumbup]

  • translate()
  • translateX()
  • translateY()
  • scale()
  • scaleX()
  • scaleY()
  • rotate()
  • skew()
  • skewX
  • skewY
  • matrix()

[/thumbup]

لیست توابع سه بعدی:

[starlist]

  • translateZ()
  • translate3d()
  • scaleZ()
  • scale3d()
  • rotateX()
  • rotateY()
  • rotateZ()
  • rotate3d()
  • matrix3dX()
  • perspective()

[/starlist]

حال به بررسی هر کدام میپردازیم:

حالت اول که rotate نام دارد عنصر مورد نظر را با توجه به مقداری که به آن داده ایم در جهت عقربه های ساعت میچرخواند.
برای مثال ما میخواهیم عنصری در صفحه به مقدار ۵۰ درجه چرخش داشته باشد:

بیشتر بخوانید :
آموزش HTML5 و CSS3 طول و عرض در css | پاسخ وردپرس | ( height and width)

حالت دوم که skew نام دارد برای کجی و انحراف عناصر به کار می رود. برای مثال:

آموزش خاصیت transform در سی اس اس

در حالت سوم که با نام scale شناخته میشود شما میتوانید عنصر خود را بزرگنمایی کنید.
برای مثال ما تصویری داریم که میخواهیم طول و عرض آن با ضریب ۱٫۵ برابر نمایش داده شود:

مقدار آخر که نام آن translate است شی مورد نظر را در دو جهت افقی و عمودی جابجا میکند.
مقدار دهی به این ویژگی بسیار آسان است. داخب پرانتز دو مقدار میتوانید بدهید،
مقدار اول در جهت افقی (محور x) و مقدار دوم در جهت عمودی (محور y) اعمال میشود.
بهتر است مقادیر را بر حسب پیکسل (px) بنویسید. برای مثال شی ما ۲۰px در جهت افقی و ۱۰px در جهت عمودی جابجا میشود:

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

بیشتر بخوانید :
آموزش طراحی قالب HTML5 و CSS3 طراحی جایگاه تبلیغات | پاسخ وردپرس |

مقادیر این تابع می توانند از نوع درجه (deg), چرخش (turn) یا رادیان (rad) باشند.

اگه این مغادیر را روی یک تصویر اعمال کنید میبیند که به چه صورت خواهد شد این آموزش هم همین جا به پایان رسید

تایکی دیگه از جلسات آموزش وب سایت پاسخ ورپرس خدا نگهدار

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *