با سلام خدمت شما دوستان گرامی امیدوارم که شاد باشید وب مستران عزیز خواص transform در CSS3 به طراح وب امکان می دهند عناصر دلخواه را منتقل کرده, چرخانده, مقیاس بندی و همچنین در صورت لزوم اریب دار کند (با زوایای مختلف بچرخانید). خاصیت transformation (تبدیل) در واقع قابلیت تغییر شکل, اندازه و موقعیت المان مورد نظر را فراهم می آورد.
CSS3 همچنین قابلیت تبدیل دو بعدی و سه بعدی عناصر را پشتیبانی می کند.
مرورگرهایی که از خاصیت تبدیل دوبعدی پشتیبانی می کنند در جدول زیر ارائه شده است:
خاصیت
IE
Chrome
Firefox
Safari
Opera
transform
۱۰٫۰
۹٫۰ -ms-
۳۶٫۰
۴٫۰ -webkit-
۱۶٫۰
۳٫۵ -moz-
۳٫۲ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
۱۲٫۱
۱۰٫۵ -o-
transform-origin
(two-value syntax)
۱۰٫۰
۹٫۰ -ms-
۳۶٫۰
۴٫۰ -webkit-
۱۶٫۰
۳٫۵ -moz-
۳٫۲ -webkit-
۲۳٫۰
۱۵٫۰ -webkit-
۱۲٫۱
۱۰٫۵ -o-
متدهای تبدیل دو بعدی در CSS3
در این فصل شما با توابع تبدیل دوبعدی عناصر (۲D transformation methods) در CSS3 آشنا خواهید شد:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
نکته: در مبحث بعدی با تبدیل سه بعدی نیز آشنا خواهید شد.
متد translate()
متد translate() یک عنصر را از موقعیت فعلی آن حرکت می دهد (البته بر اساس پارامترهایی که برای محورهای X و Y تعیین شده است). در واقع با بهره گیری از این متد می توان المان دلخواه را کپی کرده و آن را به مکانی دیگر انتقال داد.
مثال زیر تگ یا عنصر <div> را به اندازه ی ۵۰ پیکسل به سمت راست و ۱۰۰ پیکسل پایین تر از موقعیت جاری آن حرکت می دهد:
مثال:
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
تابع rotate()
متد rotate() بسته به درجه ی تعیین شده یک عنصر را در جهت عقربه ی ساعت یا در جهت خلاف آن می چرخاند (دوران می کند).
مثالی که زیر مشاهده می کنید المان <div> را به اندازه ی ۲۰ درجه در جهت حرکت عقربه ی ساعت می چرخاند:
مثال:
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
استفاده از مقادیر منفی (negative values) باعث می شود عنصر خلاف عقربه ی ساعت چرخانده شود.
مثال زیر المان <div> را ۲۰ درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند):
مثال:
div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
متد Scale()
تابع scale() اندازه ی المان را افزایش یا کاهش می دهد (کوچک و بزرگ می کند). این کار بر اساس پارامترهایی که برای طول و عرض (height ,width) تعریف می شود صورت می پذیرد.
مثال زیر عرض یا پهنای المان <div> را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند:
مثال:
div {
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
نمونه ی زیر عنصر <div> را نصف عرض و ارتفاع اصلی خود عنصر تعیین می کند:
مثال:
div {
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
متد Skew()
می توانید عنصر مورد نظر خود را در ۲ جهت عمودی و افقی به صورت ۳ بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی ۳۶۰ بچرخانید.
مثال زیر المان <div> را به اندازه ی ۲۰ درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی ۱۰ درجه می چرخاند می کند:
مثال:
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
تابع skewX()
متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند.
نمونه ی زیر المان <div> را در امتداد محور X به اندازه ی ۲۰ درجه می چرخاند:
مثال:
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
تابع skewY()
متد skewY() یک عنصر را در امتداد محور Y به اندازه ی درجه ی زاویه ی تعیین شده (بر حسب واحد deg) می چرخاند.
مثال زیر عنصر <div> را به اندازه ی ۲۰ درجه در امتداد محور Y می چرخاند:
مثال:
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری ۰ خواهد داشت. بنابراین مثال زیر المان <div> را به اندازه ی ۲۰ درجه در امتداد محور X می چرخاند:
مثال:
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
متد matrix()
متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند).
تابع matrix() 6 مقدار می گیرد, که شامل توابع ریاضی (mathematics functions) می شود و به شما امکان می دهد المان های خود را بچرخانید, مقایس بندی (کوچک و بزرگ) کنید, حرکت دهید (translate: انتقال دادن) و همچنین آن ها را مطابق نیاز با زوایای مختلف بچرخانید (skew) کنید:
مثال:
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
تمامی خاصیت های transform CSS3 به ترتیب زیر می باشند:
خاصیت / Property
شرح
transform
وضعیت نمایش المان را به دو بعدی یا سه بعدی تبدیل می کند
transform-origin
اجازه می دهد موقعیت المان های تبدیل شده (transformed element) را تغییر دهید
متدهای تبدیل دوبعدی:
Function / تابع
شرح
matrix(n,n,n,n,n,n)
تبدیل دو بعدی عنصر را با تابع matrix که ۶ مقدار به آن اختصاص داده شده باشد, تعریف می کند
translate(x,y)
انتقال دو بعدی عنصر را در حول محورهای X و Y مقدار دهی می کند
translateX(n)
انتقال دو بعدی عنصر را در طول محور X تعریف می کند
translateY(n)
انتقال دو بعدی عنصر را امتداد محور Y تنظیم و مقدار دهی می کند
scale(x,y)
مقیاس بندی عنصر را به صورت دو بعدی تعیین کرده, طول و عرض عناصر را اصلاح می کند
scaleX(n)
مقیاس بندی عنصر را به صورت دو بعدی تعریف کرده, عرض عنصر را تغییر می دهد
scaleY(n)
تبدیل مقیاس عنصر را به صورت دو بعدی تعریف کرده, ارتفاع یا طول آن را اصلاح می کند
rotate(angle)
چرخش عنصر را به صورت دو بعدی تعریف می کند و زاویه ی آن را در پارامتر مربوطه تعیین می کند
skew(x-angle,y-angle)
عنصر را در امتداد هر دو محور X و Y به صورت دو بعدی بسته به مقدار تعیین شده می چرخاند
skewX(angle)
عنصر را به صورت دو بعدی در امتداد محور X می چرخاند (تغییر و تبدیل وضعیت عنصر را به صورت دو بعدی در حول محور X مقداردهی و تعریف می کند)
skewY(angle)
عنصر را به صورت دو بعدی در امتدادی محور Y (بر اساس مقدار تعیین شده) می چرخاند
