ฟังก์ชัน rotateX

ฟังก์ชัน rotateX กำหนดการหมุนรอบ แกน X ในพื้นที่สามมิติ ใช้ ร่วมกับคุณสมบัติ transform ค่าของคุณสมบัติคือมุมใน หน่วยวัดมุม ใดๆ ก็ได้ ค่าบวกจะหมุนเข้ามาหาผู้ดู ค่าลบจะหมุนออกห่างจากผู้ดู การหมุนจะเกิดขึ้น รอบจุดที่กำหนดโดยคุณสมบัติ transform-origin

ไวยากรณ์

cssตัวเลือก {
  transform: rotateX(มุม);
}

ตัวอย่าง

ในตัวอย่างนี้ บล็อกจะหมุน 180 องศารอบแกน X เมื่อวางเมาส์เหนือ เพื่อให้การหมุนลื่นไหลได้เพิ่มคุณสมบัติ transition:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

ตัวอย่าง

เปลี่ยนแกนของการหมุนโดยใช้คุณสมบัติ transform-origin:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

ตัวอย่าง

กำหนดมุมเป็นค่าลบ:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

ดูเพิ่มเติม