آموزش CSS 3 - چرخاندن 3 بعدی عناصر با متد skew
خاصیت transform - متد skew :
به وسیله متد skew خاصیت transform ، می توانید عنصر مورد نظر خود را در 2 جهت عمودی
و افقی به صورت 3 بعدی ، بچرخانید .
برای این منظور باید میزان درجه ای که می خواهید عنصر مورد نظر خود را در 2 جهت افقی
و عمودی بچرخانید ، به ترتیب در پرانتز مقابل متد skew بر حسب واحد deg تعیین کنید
.
چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های ساعت و چنانچه
منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
این افکت یکی از قابلیت های منحصر به فرد در CSS 3 است که تنها با نوشتن یک قطعه کد
ساده امکانپذیر است .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
transform : skew ( deg1 , deg2 ) ;
مثال : transform : skew ( 90deg , 45deg ) ;
|
|
توضیح
|
این پارامتر میزان اندازه ای که می خواهید عنصر مورد نظرتان ، بر حسب درجه در جهت افقی
چرخانده شود را تعیین می کند .
همانطور که اشاره کردیم ، برای این پارامتر هم می توان مقدار مثبت و هم مقدار منفی
تعیین نمود . چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های
ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
تعیین این پارامتر اجباری است .
|
این پارامتر میزان اندازه ای که می خواهید عنصر مورد نظرتان ، در جهت عمودی بر حسب
درجه چرخانده شود را تعیین می کند .
همانطور که اشاره کردیم ، برای این پارامتر هم می توان مقدار مثبت و هم مقدار منفی
تعیین نمود . چنانچه مقدار تعیین شده مثبت باشد ، عنصر به آن میزان در جهت عقربه های
ساعت و چنانچه منفی باشد در خلاف عقربه ساعت چرخانده خواهد شد .
تعیین این پارامتر اجباری است .
|
پشتیانی در مرورگر های مختلف :
متاسفانه این خاصیت به صورت عادی توسط هیچ یک از مرورگر های مطرح پشتیانی نمی شود .
برای پشتیبانی در مرورگرهای مختلف باید برای هر کدام ، کد لازم آنها که در جدول زیر
آمده را استفاده نمود :
|
مرورگر فایرفاکس با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی
این مرورگر باید خاصیت را به صورت ( ) moz-transform- : skew بنویسید .
|
|
مرورگر اپرا با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت ( ) o-transform- : skew بنویسید .
|
|
مرورگر اینترنت اکسپلورر با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای
پشتیانی این مرورگر باید خاصیت را به صورت ( ) ms-transform- : skew بنویسید .
|
|
مرورگر کروم با اعمال یک تغییر در کد خاصیت از آن پشتیانی می کند . برای پشتیانی این
مرورگر باید خاصیت را به صورت ( ) webkit-transform- : skew بنویسید .
|
مثال عملی :
در مثال زیر به تشریح نحوه استفاده از این متد پرداخته ایم .
در مثال زیر یک عکس
تگ < / img > داریم که ابتدا در حالت عادی نمایش داده شده است . اما
در حالت دوم آن عکس را در جهت عقربه های ساعت به میزان 30 درجه و در حالت سوم در خلاف
عقربه ساعت به میزان 30 و 15 درجه چرخانده ایم . به کدها و خروجی مثال دقت نمایید :
|
< img src="../Pic/ADS/css.png" />
|
|
|
< img src="../Pic/ADS/css.png" style="-ms-transform: skew( 30deg,30deg
); /* ie 9 */ -webkit-transform: skew( 30deg,30deg ); /* chrome */
-o-transform: skew( 30deg,30deg ); /* opera */ -moz-transform:
skew( 30deg,30deg ); /* firefox */" />
|
|
|
|
< img src="../Pic/ADS/css.png" style="-ms-transform: skew( -30deg,-15deg
); /* ie 9 */ -webkit-transform: skew( -30deg,-15deg ); /* chrome
*/ -o-transform: skew( -30deg,-15deg ); /* opera */
-moz-transform: skew( -30deg,-15deg ); /* firefox */" />
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :