سرخط خبرها

transform در css متد skew

transform در css متد skew

skew برای کجی و انحراف عناصر به کار می رود. به وسیله متد skew خاصیت transform ، می توانید عنصر مورد نظر خود را در ۲ جهت عمودی و افقی به صورت ۳ بعدی ، بچرخانید . با متد ()skew شما میتوانید المنت را با دادن درجه بچرخانید ، میزان چرخش بستگی به پارامتر های عمودی ( محور X ) و افقی ( محور Y ) دارد .
 
برای این منظور باید میزان درجه ای که می خواهید عنصر مورد نظر خود را در ۲ جهت افقی و عمودی بچرخانید ، به ترتیب در پرانتز مقابل متد skew بر حسب واحد deg تعیین کنید . مقادیر آن عددی و در واحد درجه یا deg اند.
چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
این افکت یکی از قابلیت های منحصر به فرد در CSS 3 است که تنها با نوشتن یک قطعه کد ساده امکانپذیر است

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

transform : skew ( deg1 , deg2 ) ;
مثال : transform : skew ( 90deg , 45deg ) ;

میتوان به جای این مقدار skewX یا skewY را نوشت که به ترتیب به معنی کشیده کردن افقی و کشیده کردن عمودی اند.

deg1 :

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

deg2 :

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

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

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

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

مثال :

مقدار (skew(30deg,20deg المنت را ۳۰ درجه حول محور X و ۲۰ درجه حول محور Y می چرخاند .

 

div
{
transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-moz-transform: skew(30deg,20deg); /* Firefox */

-o-transform: skew(30deg,20deg); /* Opera */

-ms-transform: skew(30deg,20deg); /* IE 9 */
}

کد زیر شی را از جهات افقی و عمودی ۴۵ درجه کشیده میکند.میتوان با قرار دادن یک علامت , پس از مقدار نوشته شده،یک مقدار دیگر نیز نوشت.مقدار اول به معنی جهت افقی و دومی به معنی جهت عمودی است:

 

transform: skew(45deg);

transform: skew(45deg,30deg);

QR Code For: transform در css متد skew

درباره ی jizjiz

پاسخ دهید

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

Time limit is exhausted. Please reload CAPTCHA.