پیشنهاد دوره:

توابع rotate3d() CSS

تعریف و استفاده rotate3d() CSS

rotate3d() این تابع تعیین چرخش 3D عنصر را تعریف می‌کند. تبدیل در استفاده از ویژگی.

مثال

مثال 1

استفاده از rotate3d() چرخش چندین عناصر <div>:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

آزمایش کنید

مثال 2

استفاده از rotate3d() تصویر چرخان:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

آزمایش کنید

زبان CSS

rotate3d(x, y, z, زاویه)
مقدار توضیح
x عدد مثبت یا منفی، تعیین چرخش در محور x.
y عدد مثبت یا منفی، تعیین چرخش در محور y.
z عدد مثبت یا منفی، تعیین چرخش در محور z.
زاویه

لازم است. تعیین زاویه چرخش. واحدهای ممکن:

  • deg (درجه)
  • rad (مقدار قوس)
  • چرخش (دایره)

جزئیات فنی

نسخه: بخش تبدیل‌های CSS سطح 2

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این تابع را کامل پشتیبانی می‌کنند.

کروم ابریز افرار سافاری آپرا
12 12 10 4 15

صفحات مرتبط

تدریس:تغییرات 3D CSS

منابع:ویژگی transform CSS

منابع:ویژگی rotate CSS

منابع:توابع rotate() CSS

منابع:توابع rotateX() CSS

منابع:توابع rotateY() CSS

منابع:توابع rotateZ() CSS