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 پشتیبانی می کنند.