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

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

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

perspective() ฟังก์ชันนี้กำหนดระยะทางของผู้ใช้ไปยังพื้นที่ z=0 transform ในการใช้ของ属性

ตัวอย่าง

ใช้ perspective() เพิ่มภาพพจน์สำหรับลูกบาศก์สองลูก

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

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

ภาษา CSS

perspective(length|none)
ค่า การอธิบาย
length จำเป็น กำหนดระยะทางของผู้ใช้ไปยังพื้นที่ z=0 แบบ none หมายถึงไม่ทำการแปลงโซ่งทาง

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

รุ่น: CSS Transforms Module Level 2

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

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

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

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

ตัวอย่างการเรียนการแปลงทาง 3D ของ CSS

อ้างอิง：CSS การเปลี่ยนแปลง-transform 属性

อ้างอิง：ฟังก์ชัน rotate() ของ CSS

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

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

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

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