تابع ()rotate در CSS

rotate() Function

تابع ()rotate در CSS حرکتی را تعریف می کند که به سبب آن عنصر حول یک نقطه ثابت در صفحه دو بعدی، بدون تغییر شکل بچرخد.

نحوه نوشتار

transform: rotate(10deg);
transform: rotate(-10deg);

transform: rotate(alpha)

مقادیر

درجه​

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

در مثال زیر نحوه عملکرد این تابع CSS را میبینیم:

html

<section>
   <div class="normal">normal(0deg)</div>
</section>
<section>
   <div class="rotated1">15deg</div>
   <div class="rotated2">25deg</div>
   <div class="rotated3">35deg</div>
   <div class="rotated4">45deg</div>
</section>

css

section {
   display: flex;
   justify-content: space-around;
   padding-top: 25px;
}
div {
   width: 100px;
   height: 100px;
   background-color: lightgreen;
   display: grid;
   place-content: center;
   font-family: monospace;
}
section:last-of-type div {
   background-color: pink;
   margin-top: 20px;
}
.rotated1 { 
   transform: rotate(15deg); 
}
.rotated2 {
   transform: rotate(25deg); 
}
.rotated3 {
   transform: rotate(33deg); 
}
.rotated4 { 
   transform: rotate(45deg); 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.