تابع ()rotateZ در CSS

rotateZ() Function

تابع ()rotateZ در CSS مشخص می کند که عنصر بدون تغییر فرم، حول محور Z یا ارتفاع بچرخد.

نحوه نوشتار

transform: rotateZ(45deg);
transform: rotateZ(-35deg);

transform: rotateZ(alpha);

مقادیر

درجه (alpha)​

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

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

html

<section>
    <div class="box">this is normal box</div>
</section>
<section>
    <div class="box1">this is box1</div>
    <div class="box2">this is box2</div>
    <div class="box3">this is box3</div>
</section>

css

section {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}
div {
    width: 130px;
    height: 130px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    background-color: lightgreen; 
}
.box1 {
    transform: rotateX(25deg); 
}
.box2 {
    transform: rotateX(45deg); 
}
.box3 {
    transform: rotateX(65deg); 
}

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

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