ฟังก์ชัน rotateX() ของ CSS

การระบุและการใช้งาน

CSS rotateX() ฟังก์ชันนี้กำหนดการหมุนแบบ 3D ขององศา x (ทิศทางน้ำใต้) ขององค์ประกอบ

rotateX() ฟังก์ชันใน transform ใช้ในรูปแบบแฟ้มคุณสมบัติ

ตัวอย่าง

ตัวอย่าง 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(angle)
ค่า รายละเอียด
angle

จำเป็น กำหนดองศาการหมุน หน่วยที่สามารถใช้ได้คือ：

  • deg（องศามาตร 360 องศา）
  • rad（องศากลับ 360 องศา）
  • turn（วงกลม）

รายละเอียดเทคโนโลยี

เวอร์ชั่น： CSS Transforms Module Level 2

การสนับสนุนโปรแกรมน่าเข้าถึง

ตัวเลขในตารางแสดงการเปิดใช้งานฟังก์ชันนี้เต็มรูปแบบครั้งแรกของเวิร์ชั่นบราวเซอร์

Chrome Edge Firefox Safari Opera
12 12 10 4 15

หน้าที่เกี่ยวข้อง

คู่มือฝึกCSS 3D ทางเลื่อน

อ้างอิง:CSS รายละเอียด transform

อ้างอิง:CSS rotate รายละเอียด

อ้างอิง:CSS function rotate()

อ้างอิง:CSS function rotate3d()

อ้างอิง:CSS function rotateY()

อ้างอิง:CSS function rotateZ()