وظیفه rotateX() CSS

تعریف و استفاده

CSS rotateX() وظیفه تعریف می‌کند چرخش 3D عنصر به دور محور x (جهت افقی).

rotateX() وظیفه در تبدیل در استفاده از ویژگی.

مثال

مثال 1

استفاده از rotateX() چرخش چندین عنصر <div> به دور محور x (جهت افقی):

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

آزمایش کنید

مثال 2

استفاده از rotateX() چرخش تصویر به دور محور x (جهت افقی):

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

آزمایش کنید

قوانین CSS

rotateX(زاویه)
مقدار توضیح
زاویه

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

  • deg (درجه)
  • rad (درجه弧)
  • چرخش (چرخه)

جزئیات فنی

نسخه: محدوده تبدیل CSS Module Level 2

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

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

Chrome Edge Firefox Safari Opera
12 12 10 4 15

صفحات مرتبط

آموزش:تبدیل 3D CSS

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

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

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

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

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

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