CSS rotate thuộc性能

การนิยามและการใช้งาน

rotate คุณสมบัตินี้อนุญาตให้คุณหมุนตัวองค์ประกอบ

rotate คุณสมบัตินี้นิยามระดับที่หมุนของตัวองค์ประกอบรอบฟาก z ตามทิศทางนั้น ถ้าต้องการหมุนตัวองค์ประกอบรอบฟาก x หรือ y หรืออื่น ต้องนิยามตามที่เหมาะสม

rotate ค่าของคุณสมบัตินี้สามารถเป็นมุม ชื่อฟาก + มุม หรือสามค่า + มุม

  • ถ้ามีมุมเดียว ตัวองค์ประกอบจะหมุนตามฟาก z ตามทิศทางนั้น
  • ถ้ามีชื่อฟาก + มุม ตัวองค์ประกอบจะหมุนตามฟากที่กำหนด
  • ถ้ามีสามค่า + มุม สามค่านี้นิยามเวกเตอร์ ตัวองค์ประกอบจะหมุนรอบเวกเตอร์นี้

เพื่อเข้าใจความหมายดีขึ้น rotate คุณสมบัติการแสดง

สัญญาณเตือน:ยังมีวิธีอื่นเพื่อหมุนตัวองค์ประกอบด้วยการใช้ CSS rotate() ฟังก์ชัน ของคุณสมบัติ CSS transform

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนการหมุนของตัวองค์ประกอบ:

div {
  rotate: 30deg;
}

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

ตัวอย่าง 2

เมื่อ rotate เมื่อคุณตั้งค่าคุณสมบัติแวกเวกเตอร์และมุม ตัวองค์ประกอบจะหมุนรอบแวกเวกเตอร์นี้

ในนี้ แวกเวกเตอร์คือ [1 1 0] ในแผนกาแล็กซ์สองมิติ มีตัวเลข x และ y และหมุน 60 องศา:

div {
  rotate: 1 1 0 60deg;
}

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

ระบบทางภาษา CSS

rotate: axis angle|initial|inherit;

ค่าที่ใช้ในคุณสมบัติ

ค่า คำอธิบาย
axis

ตัวเลือก

  • x
  • y
  • z
angle

นิยามระดับที่หมุนของตัวองค์ประกอบ ค่าหน่วยที่เป็นไปได้:

  • deg(องศา)
  • rad(รายละเอียด)
  • turn(รอบ)
vector angle

สามตัวเลขนี้นิยามเวกเตอร์ ตัวองค์ประกอบจะหมุนรอบเวกเตอร์นี้

สามตัวเลขนี้เป็นตัวเลข x, y และ z ของเวกเตอร์

ค่าที่สุดท้ายคือมุมที่หมุน

ค่าที่เป็นไปได้:

number number number angle

initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น ดู initial
inherit จากตัวอุปกรณ์พ่อของมันที่มีคุณสมบัตินี้ ดู inherit

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

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างอนุปราย: สนับสนุนคุณสมบัติที่เกี่ยวข้องกับอนุปราย
รุ่น: CSS3
JavaScript ระบบทางภาษา: object.style.rotate="-120deg"

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

ตัวเลขในตารางนี้แสดงรุ่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

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

ตำรา:CSS 2D การแปลง

ตำรา:การเปลี่ยนแปลง 3D ของ CSS

อ้างอิง:CSS scale thuộc性能

อ้างอิง:CSS translate 属性