کار با ویژگی Transforms در CSS3

ویژگی تِرنسفرم یا Transform یکی دیگر از ویژگی های زبان CSS می باشد که در نسخه ۳ این زبان اضافه شده است و با استفاده از آن میتوان عناصر را در یک صفحه وب تبدیل کرد. مثلا با استفاده از این ویژگی میتوانیم عناصر را در یک صفحه وب بچرخانیم ( Rotate ) یا مقیاس پذیری ( Scale ) و یا مثلا میتونیم یک عنصر را بصورت کج شده به نمایش درآوریم. این ویژگی تعدادی مقدار / تابع / حالت داره که ما با استفاده از آنها میتوانیم عناصرمون رو بصورت ۲ بعدی و یا ۳ بعدی به نمایش درآوریم.

توابع ۲ بعدی (۲D) این ویژگی به شرح زیر می باشند :

Matrix(n,n,n,n,n,n)
Translate(x,y)
TranslateX(x)
TranslateY(y)
Scale(x,y)
ScaleX(x)
ScaleX(Y)
Rotate(angle)
Skew(x-angle,y-angle)
SkewX(angle)
SkewY(angle)

توابع ۳ بعدی ( ۳D ) این ویژگی به شرح زیر می باشند :

Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Translate3d(x,y,z)
Scale3d(x,y,z)
ScaleZ(z)
Rotate3d(x,y,z,angle)
RotateX(angle)
RotateY(angle)
RotateZ(angle)

نحوه استفاده

شکل کلی نحوه استفاده از ویژگی Transform در CSS3 :

transform: none|transform-functions;

1	transform: none\|transform-functions;

که بجای transform-functions باید از مقادیر موجود در جدول زیر استفاده نمایید.

جدول مقادیر ویژگی Transform بهمراه توضیحات و مثال

نام مقدار	توضیح
none	هیچگونه عملی / تبدیلی انجام نخواهد گرفت.
Matrix(n,n,n,n,n,n)	استفاده از ماتریکس ۶ مقداری برای تبدیل ۲بعدی
Translate(x,y)	برای جابه جایی بصورت ۲بعدی
TranslateX(x)	جابه جایی در محور X ها
TranslateY(y)	جابه جایی در محور Y ها
Scale(x,y)	مقیاس پذیری بصورت ۲بعدی (بزرگ و کوچک کردن عناصر)
ScaleX(x)	مقایس پذیری فقط در محور X ها
ScaleY(y)	مقیاس پذیری فقط در محور Y ها
Rotate(angle)	برای چرخش دادن یک عنصر
Skew(x-angle,y-angle)	کج / مورب کردن عناصر در محور X و Y
SkewX(angle)	کج / مورب کردن عنصر فقط در محور X ها
SkewY(angle)	کج / مورب کردن عنصر فقط در محور Y ها
Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	ماتریکس ۱۶مقداری (۴*۴) ۳بعدی
Translate3d(x,y,z)	جابه جایی عنصر در محور X,Y,Z بصورت ۳بعدی
Scale3d(x,y,z)	مقایس پذیری عنصر در محور X,Y,Z بصورت ۳بعدی
ScaleZ(z)	مقایس پذیری فقط در محور Z ها
Rotate3d(x,y,z,angle)	یک چرخش ۳بعدی را در محورهای X,Y,Z ایجاد میکند
RotateX(angle)	چرخش فقط در محور X ها
RotateY(angle)	چرخش فقط در محور Y ها
RotateZ(angle)	چرخش فقط در محور Z ها

پشتیبانی مرورگرها از transform های ۲بعدی و ۳ بعدی

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

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
Transform (2D)	۳۶٫۰	۱۶٫۰	۲۳٫۰	۹٫۰	۱۰٫۰
Transform (2D)	۴٫۰ \| -webkit-	۳٫۵ \| -moz-	۱۵ \| -webkit- ۱۰٫۵ \| -o-	۳٫۲ \| -webkit-	۹ \| -ms-

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
Transform (3D)	۳۶٫۰	۱۰٫۰	۲۳٫۰	۹٫۰	۱۲٫۰
Transform (3D)	۱۲٫۰ \| -webkit-	۱۰٫۰	۱۵٫۰ \| -webkit-	۴٫۰ \| -webkit-	۱۲٫۰

بیشتر بخوانیم:

کار با ویژگی Transforms در CSS3