چرخش یک عنصر در سی اس اس – CSS

css3Logo_زبان سی اس اس (CSS – Cascade style sheet) زبانیست برای اینکه بتوان در صفحات وب به المان ها و عناصر ایجاد شده توسط زبان اچ تی ام ال (HTML)، خصوصیاتی را نسبت داد که به بهتر شدن شکل ظاهری و وضعیت بصری المان ها در صفحه وب، کمک کند.

برای مشاهده ادامه متن چرخش یک عنصر در سی اس اس – CSS  به ادامه مطلب مراجعه نمایید.

در این پست ما نمی خواهیم به معرفی، بررسی و توضیح زبان سی اس اس (CSS) بپردازیم. بلکه قصد داریم تا یک کد خاص برای چرخش یک عنصر در سی اس اس – CSS  را مطرح و در اختیار دوستان قرار بدهیم.

ممکن است که تا به حال در برخی از سایت ها مشاهده کرده اید که با رفتن ماوس روی یک المان یا یک بخش خاص از سایت، آن المان به چرخش در می آید.

میخواهیم باهم این کار را انجام دهیم. ابتدا یک صفحه اچ تی ام ال (HTML) ساخته و کدهای پایین را در داخل آن قرار می دهیم:

1
2
3
</p>

<div class="circle"></div>

سپس در بخش Head صفحه و در تگ استایل (style) کدهای زیر را قرار می دهیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.circle {
border-top: 10px solid #FF3399;
border-left: 10px solid #FF3399;
border-right: 10px solid #CCCCCC;
border-bottom: 10px solid #CCCCCC;
width: 100px;
height: 100px;
border-radius: 100%;
transition: transform 500ms;
-webkit-transition: transform 500ms;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.circle:hover {
transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.ch {
width: 100px;
height: 100px;
background: url(http://icons.iconarchive.com/icons/martz90/circle/48/camera-icon.png) 50% 50% no-repeat;
text-align: center;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

به این ترتیب، میتوانیم با بردن ماوس بر روی شکل شاهد چرخش آن باشیم.

برای کسب اطلاعات بیشتر درباره سی اس اس (CSS) میتوانید از ویکی پدیا و w3c بازدید نمایید.

برای مشاهده آنلاین کد چرخش یک عنصر در سی اس اس – CSS نیز میتوانید اینجا کلیک کنید.