تغییر شکل دو بعدی عناصر در CSS

CSS 2D Transforms

0 356

تغییر شکل (transform) دو بعدی عناصر

با استفاده از CSS می توانیم عناصر HTML را در حالت های مختلف تغییر شکل دهیم. به طور مثال آن ها را بچرخانیم و یا کوچک و بزرگ کنیم یا هر تغییر شکلی که در دو بعد انجام بگیرد (البته تغییرات سه بعدی را نیز داریم که در مقاله ی بعدی مورد بحث قرار خواهیم داد).

وضعیت پشتیبانی از این قابلیت در جدول زیر آمده است. توجه داشته باشید که اعداد این جدول، نخستین نسخه ای از آن است که از قابلیت transform پشتیبانی کامل می کند و اعدادی که همراه پسوندهایی مانند -ms- و -webkit- و … هستند نشان دهنده ی اولین نسخه ای از مرورگر هستند که فقط با آن پسوند کار می کند:

خصوصیت کروم edge فایرفاکس سافاری اپرا
transform 36.0

4.0 -webkit-

10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin (حالتی که دو مقدار می گیرد) 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-

قابلیت های معروف برای تغییر دوبعدی عناصر از این قرارند:

  • translate
  • rotate
  • scale
  • skewX
  • skewY
  • matrix

می خواهیم تک تک آن ها را بررسی کنیم.

متد ()translate

متد ()translate برای جابجایی عناصر در css بکار می رود و عنصر مورد نظر را از مکان فعلی خود به مکان دیگری منتقل می کند.

به طور مثال در کد زیر مشخص کرده ایم که عنصر <div> به مقدار 50 پیکسل به سمت راست و 100 پیکسل به سمت پایین حرکت کند:

مشاهده ی خروجی در JSBin

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

متد ()rotate

متد ()rotate عنصر مورد نظرمان را میچرخاند، حالا یا در جهت عقربه های ساعت و یا خلاف آن (بسته به زاویه ای که ما به آن بدهیم).

در مثال زیر به کد گفته ایم که عنصر <div> را در حدود 20 درجه و در جهت عقربه های ساعت (مثبت بودن درجه) بچرخان:

مشاهده ی خروجی در JSBin

در این مثال عنصر اولیه را حفظ کرده ایم تا متوجه تغییر شوید.

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

مشاهده ی خروجی در JSBin

متد ()scale

متد ()scale عنصر ما را، بر اساس پارامترهای عرض و طولی که به آن می دهیم، از نظر اندازه بزرگ تر یا کوچک تر می کند.

در مثال زیر گفته ایم که عنصر <div> باید دو برابر عرض اولیه و سه برابر ارتفاع اولیه اش را بگیرد:

مشاهده ی خروجی در JSBin

حالا در مثال دیگری می گوییم طول و عرض عنصر ما را نصف کند:

مشاهده ی خروجی در JSBin

متد ()skewX

متد ()skewX عنصر را در محور x منحرف و کج می کند. در مثال زیر عنصر <div> را 20 درجه در محور x ها منحرف کرده ایم:

مشاهده ی خروجی در JSBin

متد ()skewY

این متد دقیقا مانند متد قبلی است با این تفاوت که انحرف و کج شدگی در طول محور Y رخ می دهد. بنابراین همان مثال را دوباره به صورت 20 درجه اما در جهت محور Y منحرف کرده ایم:

مشاهده ی خروجی در JSBin

متد ()skew

اگر بخواهید عنصر را در هر دو محور منحرف کنید باید از دستور ()skew استفاده کنید.

در مثال زیر <div> را 20 درجه در محور x و 10 درجه در محور y منحرف کرده ایم:

مشاهده ی خروجی در JSBin

نکته: اگر مقدار پارامتر دوم را ندهید، مقدار پیش فرض آن برابر صفر خواهد بود.

بنابراین اگر کدی به شکل زیر داشته باشیم:

بدین معنی است که <div> به مقدار 20 درجه در محور X ها منحرف شده و تغییر دیگری نداشته است.

متد ()matrix

متد()matrix تمام تغییرات دو بعدی را در یک تغییر ترکیب می کند! این متد 6 پارامتر می گیرد که توابع ریاضی هستند و به شما اجازه می دهند که عنصری را rotate یا scale یا translate یا skew  کنید. در واقع این دستور به شکل کامل به همراه پارامتر هایش به این شرح است:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

امیدواریم این درس از مجموعه آموزش CSS پیشرفته برای شما مفید بوده باشد. در درس های بعدی هم همراه ما باشید.

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle