سرخط خبرها

transform در css متد rotate

transform در css متد rotate

شما میتوانید با استفاده از خاصیت transform بر روی عناصر جلوه های ویژه ای را اعمال کنید ( در آخر خواهیم آموخت چگونه با استفاده از این خاصیت یه حالت انیمیشن به عناصر بدهیم.)
این صفت به خودی خودی شامل چندین مقدار است که خود این مقدار ها نیز مقادیری را دریافت میکنند.

توجه :داشته باشید که مقادیری که مقادیر(!) این صفت دریافت میکنند را باید در داخل پرانتز نوشت.

خاصیت  transform  سه مقدار دارد، و هر مقدار  برای یکی از جلوه ها به کار می رود.

مقادیری که صفت transorm دریافت میکند عبارت اند از:

rotate جهت چرخش اشیا.  برای چرخش اجزا به کار می رود.

scale جهت بزرگنمایی و چند برابر کردن اشیا. برای بزرگنمایی عناصر به کار می رود
skew جهت کشیده کردن اشیا. برای کجی و انحراف عناصر به کار می رود

translate برای جابجا کردن اشیا در مقیاس(واحد) پیکسل استفاده میشود

matrix متد matrix() دربردارنده تمامی تبدیل های دو بعدی است . متد matrix دارای شش پارامتر است ، حاوی توابع ریاضی ، که به شما اجازه میدهد بچرخانید ، بزرگ یا کوچک کنید ، حرکت دهید ، یا آن را کج (خم) کنید .

 

خاصیت transform – متد rotate :

مقدار rotate، جهت چرخاندن اشیا کاربرد دارد. مقادیری که این مقدار دریافت میکند عددی اند و در واحد deg به معنی درجه degree نوشته میشوند.

به وسیله متد rotate خاصیت transform ، می توانید عنصر مورد نظر خود را در جهت عقربه ساعت و یا خلاف جهت عقربه ساعت بر حسب یک درجه تعیین شده ، بچرخانید .
برای این منظور باید میزان درجه ای که می خواهید عنصر مورد نظر خود را بچرخانید ، در پرانتز مقابل متد rotate بر حسب واحد deg تعیین کنید .
چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
این افکت یکی از قابلیت های منحصر به فرد در CSS3 است که تنها با نوشتن یک قطعه کد ساده امکانپذیر است .

پارامتر deg

این پارامتر میزان اندازه ای که می خواهید عنصر مورد نظرتان ، بر حسب درجه چرخانده شود را تعیین می کند .
همانطور که اشاره کردیم ، برای این پارامتر هم می توان مقدار مثبت و هم مقدار منفی تعیین نمود . چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
تعیین این پارامتر اجباری است . این مقدار از اعداد منفی نیز پشتیبانی می کند.

شکل کلی استفاده از خاصیت rotate به صورت زیر است :

transform : rotate ( deg ) ;

مثال : transform : rotate ( 90deg ) ;

پشتیبانی در مرورگر های مختلف :

دقت کنید که حتما از پیشوندهای مرورگرها استفاده کنید تا در اجرای کد مشکلی پیش نیاید.

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

کد لازم برای پشتیانی نوع مرورگر
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت

( ) moz-transform- : rotate بنویسید .
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت

( ) o-transform- : rotate بنویسید .
مرورگر اینترنت اکسپلورر با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت

( ) ms-transform- : rotate بنویسید .
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این مرورگر باید خاصیت را به صورت

( ) webkit-transform- : rotate بنویسید .

مثال :

برای مثال ما میخواهیم عنصری در صفحه به مقدار ۵۰ درجه چرخش داشته باشد:

.class {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
ms-transform: rotate(50deg);
}

چرخش به میزان ۹۰ درجه در جهت عقربه های ساعت 

 

img {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

چرخش به میزان ۴۵ درجه در جهت خلاف عقربه های ساعت

 

img {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
QR Code For: transform در css متد rotate

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.