آموزش طراحی وب CSS 3
روش جدید قالب بندی صفحات وب

---

آموزش CSS 3 - چرخاندن 3 بعدی عناصر با متد skew

خاصیت transform - متد skew :

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

Syntax

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

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

---

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

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

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

---

مثال عملی :

در مثال زیر به تشریح نحوه استفاده از این متد پرداخته ایم .
در مثال زیر یک عکس تگ < / img > داریم که ابتدا در حالت عادی نمایش داده شده است . اما در حالت دوم آن عکس را در جهت عقربه های ساعت به میزان 30 درجه و در حالت سوم در خلاف عقربه ساعت به میزان 30 و 15 درجه چرخانده ایم . به کدها و خروجی مثال دقت نمایید :

حالت 1 - مکان اولیه عکس
< img src="../Pic/ADS/css.png" />	کد
	خروجی

حالت 2 - چرخش به میزان 30 درجه در جهت عقربه های ساعت
< 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 */"     />	کد
	خروجی

حالت 3 - چرخش به میزان 30 , 15 درجه در جهت خلاف عقربه های ساعت
< 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 */"     />	کد
	خروجی

---

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

---

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است : بلهخیر نام :                  آدرس Email :       نظر شما :     سوال امنیتی : پایتخت ایران ؟