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