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

หน้าก่อน ฟังก์ชัน rotate() ของ CSS
หน้าต่อไป ฟังก์ชัน rotateX() ของ CSS
กลับไปยังเวอร์ชั่นที่ก่อน คู่มืออ้างอิงฟังก์ชัน CSS

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

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

rotate3d() ฟังก์ชันนี้กำหนดการหมุน 3D ขององค์ประกอบ transform ใช้ในรายละเอียดของนามสาขา

ตัวอย่าง

ตัวอย่าง 1

ใช้ rotate3d() หมุนหลายตัว <div> มากกว่า:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

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

ตัวอย่าง 2

ใช้ rotate3d() หมุนภาพ:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

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

CSS ระบบสัญลักษณ์

rotate3d(x, y, z, angle,

)	รายละเอียด
x	ตัวเลขบวกหรือลบ กำหนดการหมุนตามตัวอักษร X
y	ตัวเลขบวกหรือลบ กำหนดการหมุนตามตัวอักษร Y
z	ตัวเลขบวกหรือลบ กำหนดการหมุนตามตัวอักษร Z
angle	จำเป็น กำหนดองศาการหมุน หน่วยที่เป็นไปได้: deg（องศามุม） rad（องศาเรทวงกลม） turn（วงกลม）