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 |
ตัวเลือก
|
angle |
นิยามระดับที่หมุนของตัวองค์ประกอบ ค่าหน่วยที่เป็นไปได้:
|
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 属性