آموزش کار با ویژگی Transforms در CSS3

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Transforms در CSS3 با من همراه باشید.

آموزش کار با ویژگی Transforms در CSS3

Free-Learn

کار با ویژگی 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)

Free-Learn

نحوه استفاده

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

که بجای 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 ها

Free-Learn

پشتیبانی مرورگرها از 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- ۱۲٫۰

Free-Learn