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

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

CSS rotate() การหมุน 2D ขององค์ประกอบฟังก์ชัน

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

ตัวอย่าง

ตัวอย่าง 1

ใช้ rotate() หมุนหลาย <div> อิเลิง:

#myDiv1 {
  transform: rotate(25deg);
}
#myDiv2 {
  transform: rotate(45deg);
}
#myDiv3 {
  transform: rotate(-45deg);
}

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

ตัวอย่าง 2

ใช้ rotate() การหมุนรูปภาพ:

#img1 {
  transform: rotate(90deg);
}
#img2 {
  transform: rotate(45deg);
}
#img3 {
  transform: rotate(-45deg);
}

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

CSS ภาษา

rotate(angle)
ค่า รายละเอียด
angle

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

  • deg（องศาแบบฝรั่งเศส）
  • rad（องศาสมอง）
  • turn（วงกลม）

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

รุ่น: CSS Transforms Module Level 1

การสนับสนุนของเบราเซอร์

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

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

ตัวอย่าง:CSS 2D การเปลี่ยนทรง

อ้างอิง:CSS การทำการทบทวน

อ้างอิง:CSS rotate ระบุความเกี่ยวข้อง

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

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

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

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