تبدیل های دو بعدی CSS (2D Transforms)
در این راهنما، «تبدیل های دو بعدی CSS» را می بینیم. با ویژگی transform می توانید عناصر را بچرخانید، جابه جا کنید، بزرگ نمایی کنید و اریب دهید. سپس با ترکیب توابع، جلوه های قدرتمندی می سازید.
مرور سریع تبدیل های دو بعدی CSS
ویژگی transform از توابعی مانند translate()، rotate()، scale()، skew() و matrix() پشتیبانی می کند.
- translate(x,y) جابه جایی روی محورهای X و Y
- rotate(deg) چرخش ساعت گرد یا پادساعت گرد
- scale(x,y) تغییر مقیاس عرض و ارتفاع
- skew(xdeg,ydeg) اریب کردن روی محورهای X و Y
- matrix(a,b,c,d,e,f) ترکیب یک جای همه تبدیل ها
نکته: با transform-origin می توان نقطه مرجع چرخش یا مقیاس را تغییر داد.
تبدیل های دو بعدی CSS: translate()
تابع translate() عنصر را از جای فعلی جابه جا می کند.
div { transform: translate(50px, 100px); }rotate()
تابع rotate() عنصر را بر حسب درجه می چرخاند. مقدار منفی جهت را برعکس می کند.
.cw { transform: rotate(20deg); } .ccw { transform: rotate(-20deg); }scale(), scaleX(), scaleY()
برای تغییر اندازه عنصر از scale() یا نسخه های محوری استفاده کنید.
.bigger { transform: scale(2, 3); } .smaller { transform: scale(0.5, 0.5); } .wide { transform: scaleX(2); } .tall { transform: scaleY(3); }skewX(), skewY(), skew()
تابع های اریب سازی، عنصر را روی محورهای افقی و عمودی کج می کنند.
.skx { transform: skewX(20deg); } .sky { transform: skewY(20deg); } .sk { transform: skew(20deg, 10deg); }matrix()
تابع matrix(a,b,c,d,e,f) شش پارامتر می گیرد و چرخش، مقیاس، جابه جایی و اریب را یک جا اعمال می کند.
div { transform: matrix(1, -0.3, 0, 1, 0, 0); }هشدار: زنجیره کردن چند تبدیل در یک ویژگی transform ترتیب مهمی دارد؛ جابه جایی پس از چرخش نتیجه متفاوتی نسبت به قبل از آن می دهد.
لینک ها و ادامه یادگیری تبدیل های دو بعدی CSS
مباحث مرتبط را نیز ببینید: افکت های متن CSS و تبدیل های سه بعدی CSS. همچنین مستندات مرجع: MDN transform و W3C CSS Transforms.