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

การกำหนดและการใช้งาน

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

rotateY() ฟังก์ชันใน transform ใช้ในรายละเอียดของประกาศ

ตัวอย่าง

ตัวอย่าง 1

ใช้ rotateY() หมุนหลายองค์ประกอบ <div> ตามนาวแบบ y (ทิศทางตั้งฝีมือ)

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

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ rotateY() หมุนรูปภาพตามนาวแบบ y (ทิศทางตั้งฝีมือ)

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

ทดลองด้วยตัวเอง

CSS ภาษา

rotateY(angle)
ค่า การอธิบาย
angle

จำเป็น กำหนดองศาการหมุน หน่วยที่อาจใช้:

  • deg (องศา)
  • rad (องศาเรียง)
  • turn (วงกลม)

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

รุ่น: CSS Transforms Module Level 2

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางนี้ระบุรุ่นที่เป็นบราวเซอร์แรกที่สนับสนุนฟังก์ชันนี้เสร็จสมบูรณ์

Chrome Edge Firefox Safari Opera
12 12 10 4 15

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

คู่มือฝึกสอน:CSS 3D การเปลี่ยนแปลง

อ้างอิง:CSS transform คุณสมบัติ

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

อ้างอิง:CSS rotate() ฟังก์ชัน

อ้างอิง:CSS rotate3d() ฟังก์ชัน

อ้างอิง:CSS rotateX() ฟังก์ชัน

อ้างอิง:CSS rotateZ() ฟังก์ชัน