تابع ()rotate3d در CSS

rotate3d() Function

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

نحوه نوشتار

transform: rotate3d(1, 0, 1, 45deg);

transform: rotate3d(x, y, z, alpha)

در فضای سه بعدی محور گردش عنصر بر اساس سه محور [x,y,z] مشخص می شود.
در این تابع CSS، چرخش عنصر بر مبنای سه عدد و یک مقدار برای زاویه مشخص می شود.

مقادیر

X​

این مقدار باعث چرخش عنصر حول محور X یا افقی می شود. مقدار قابل استفاده 0 و 1 است.

Y​

این مقدار باعث چرخش عنصر حول محور Y یا عمودی می شود. مقدار قابل استفاده 0 و 1 است.

Z​

این مقدار باعث چرخش عنصر حول محور Z یا ارتفاع می شود. مقدار قابل استفاده 0 و 1 است.

alpha​

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

نکته: برای مشاهده این چرخش بصورت سه بعدی، باید در عنصر والد از ویژگی perspective استفاده کرد.

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

html

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

css

section {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    padding: 50px 0;
}
section:last-of-type {
    perspective: 400px; 
}
section:last-of-type div {
    background-color: pink; 
}
div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 130px;
    background-color: lightgreen;
}
.box1 {
    transform: rotate3d(1, 1, 0, 40deg); 
}
.box2 {
    transform: rotate3d(1, 0, 1, 60deg); 
}
.box3 {
    transform: rotate3d(1, 0, 0, 60deg); 
}

به عنصر والد عناصر صورتی ویژگی perspective داده شده است.

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

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