چرخش (Rotation) یک عنصر به صورت کج شدن (Skew) نسبت به محور X ، به یک اندازه مشخص (بر حسب درجه (Degree))، با مشخصه های transform:skewX و ms-transform:skewX- و webkit-transform:skewX- ، در CSS
فرض کنید که یک عنصر (Element) در صفحه داریم و می خواهیم نمایش آن در صفحه، به همراه 30 درجه (Degree) چرخش (Rotation) به صورت کج شدن (Skew) نسبت به محور X باشد (دقت شود که چرخش به صورت انیمیشن نیست و از ابتدا عنصر را با آن میزان چرخش مشاهده می کنیم)، برای این منظور، می توانیم مشخصه های transform:skewX و ms-transform:skewX- و webkit-transform:skewX- در CSS را برای آن عنصر ذکر نماییم.
به عنوان مثال، فرض کنید که یک عنصر با id برابر kelidestan داریم و قصد داریم که به اندازه 30 درجه (Degree) چرخش (Rotation) به صورت کج شدن (Skew) نسبت به محور X داشته باشد، بنابراین کد CSS زیر را برای آن عنصر می نویسیم :
به مثال زیر توجه کنید :
کد کامل صفحه HTML :
نتیجه :
میزان چرخش (Rotation) به صورت کج شدن (Skew) را با عدد منفی نیز می توانیم بیان کنیم تا جهت چرخش (Rotation) در جهت برعکس باشد.
به مثال زیر توجه کنید :
کد کامل صفحه HTML :
نتیجه :
دلیل به کار بردن 3 مشخصه (Property) در کدهای CSS ، عمل کردن کدها در تمامی مرورگرهای اینترنت (Browser) می باشد.
