คำแนะนำหลักสูตร

CSS rotateZ() ฟังก์ชัน

การกำหนดและการใช้งาน rotateZ() CSS

rotateZ() ฟังก์ชันนี้กำหนดการหมุน 3D ขององค์ประกอบตามแกน z transform ใช้ในรูปแบบของอัตราส่วน

คำแนะนำ:rotateZ(angle) เท่ากับ rotate(angle)。

ตัวอย่าง

ตัวอย่าง 1

ใช้ rotateZ() หมุนหลาย <div> รอบแกน z:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

ลองทดลองเอง

ตัวอย่าง 2

ใช้ rotateZ() หมุนรูปภาพรอบแกน z:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

ลองทดลองเอง

CSS การเขียน

rotateZ(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 rotateY() ฟังก์ชัน