آموزش ویژگی transform در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی transform در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی transform در CSS
با استفاده از ویژگی transform ( در لغت یعنی انتقال ) در CSS میتوان عناصر را بصورت ۲ بعدی ( ۲D ) و یا سه بعدی ( ۳D ) از نقطه به نقطه ای دیگر انتقال یا مثلا چرخش یا کج کردن و.. داد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی transform را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : وسط قرار دادن یک دکمه با استفاده از Translate
|
1 2 3 4 5 6 |
div a{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } |
مثال شماره ۲ : استفاده از مقدار Scale ( افزایش یا کاهش مقیاس )
|
1 2 3 |
div:hover{ transform:scale(3); } |
مثال شماره ۳ : استفاده از مقدار Rotate ( برای چرخوندن عناصر )
|
1 2 3 |
div img:hover{ transform:rotate(360deg); } |
مثال شماره ۴ : استفاده از چندین مقدار بصورت همزمان ( باید بین هر یک از مقادیر یک عدد فاصله قرار داد )
|
1 2 3 |
div img:hover{ transform:rotate(360deg) scale(1.5); } |
Free-Learn
جدول مشخصات ویژگی transform در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.transform=”rotate(360deg)”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی transform در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| transform (2D) | ۳۶٫۰ ۴٫۰ -webkit- |
۱۶٫۰ ۳٫۵ -moz- |
۲۳٫۰ ۱۵٫۰ -webkit- ۱۰٫۵ -o- |
۹٫۰ ۳٫۲ -webkit- |
۱۰٫۰ ۹٫۰ -ms- |
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| transform (3D) | ۳۶٫۰ ۱۲٫۰ -webkit- |
۱۰٫۰ | ۲۳٫۰ ۱۵٫۰ -webkit- |
۹٫۰ ۴٫۰ -webkit- |
۱۰٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
transform: none|یک یا چندین مقادیر موجود در جدول مقادیر|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی transform در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
- مقداری که Translate می پذیرد میتواند یکی از واحدهای اندازه گیری همچون %,px باشد.
- مقداری که Scale می پذیرد میتواند یک عدد باشد. ( مثه ۱٫۷ )
- مقداری که Rotate و Skew می پذیرد میتواند یک درجه باشد. ( مثه ۱۸۰deg یا ۳۶۰deg )
| مقدار | توضیح |
|---|---|
| none | پیش فرض – هیچ انتقالی بروی عنصر ایجاد نمیشود |
| matrix(n) | حالت ۲D – ماتریس ۶ مقداری |
| matrix3d(n) | حالت ۳D – ماتریس ۴*۴ ( ۱۶ مقداری ) |
| translate(x,y) | برای جابه جایی عناصر در محور Xها و Yها |
| translate3d(x,y,z) | برای جابه جایی عناصر بصورت ۳D در محور ( X,Y,Z ) |
| translateX(x) | برای جابه جایی عناصر فقط در محور X ها |
| translateY(y) | برای جابه جایی عناصر فقط در محور Y ها |
| translateZ(z) | برای جابه جایی عناصر فقط در محور Z ها |
| scale(x,y) | تغییر مقیاس در محور X و Y |
| scale3d(x,y,z) | تغییر مقیاس بصورت ۳D در محور X و Y و Z |
| scaleX(x) | تغییر مقیاس فقط در محور X |
| scaleY(y) | تغییر مقیاس فقط در محور Y |
| scaleZ(z) | تغییر مقیاس فقط در محور Z |
| rotate(angle) | زاویه چرخش ۲D عنصر را مشخص میکند |
| rotate3d(x,y,z,angle) | زاویه چرخش در محور X,Y,Z عنصر را مشخص میکند |
| rotateX(angle) | زاویه چرخش فقط در محور X ها |
| rotateY(angle) | زاویه چرخش فقط در محور Y ها |
| rotateZ(angle) | زاویه چرخش فقط در محور Z ها |
| skew(x-angle,y-angle) | زاویه کج کردن عنصر در محور X و Yها |
| skewX(angle) | زاویه کج کردن عنصر فقط در محور X |
| skewY(angle) | زاویه کج کردن عنصر فقط در محور Y |
| perspective(n) | ایجاد یک چشم اندازه ۳D برای عناصر فرزند |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- مقادیری که مربوط به ماتریس می باشد » در واقع روشی برای تبدیل کردن می باشد، مثال :
|
1 |
rotate(45deg) translate(24px, 25px) |
ماتریسش میشه :
|
1 |
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824) |
- مقدار Perspective بروی خوده عنصر تاثیری ندارد فقط بروی فرزندانش یک چشم انداز سه بعدی ایجاد میکند. ( حتما آموزش ویژگی perspective را مشاهده نمایید )
برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و سافاری و اُپرا
- -moz- برای مرورگر موزیلا فایرفاکس
- -ms- برای مرورگر اینترنت اکسپلورر
