การแปลง CSS 3D

สารบัญ

แสดงสารบัญ

การแปลง CSS 3D

CSS ยังรองรับการแปลง 3 มิติอีกด้วย

เลื่อนเมาส์ไปที่องค์ประกอบด้านล่างเพื่อดูความแตกต่างระหว่าง 2D และการแปลงร่าง 3 มิติ:

2D rotate

3D rotate

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติ CSS ต่อไปนี้:

transform

รองรับเบราว์เซอร์

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

Property
transform	36.0	10.0	16.0	9.0	23.0

วิธีการแปลง CSS 3D

ด้วยคุณสมบัติ CSS transform ที่คุณสามารถใช้ได้ วิธีการแปลง 3D ต่อไปนี้:

rotateX()
rotateY()
rotateZ()

วิธีการ `rotateX()`

rotateX() วิธีการหมุนองค์ประกอบรอบแกน X ของมันในระดับที่กำหนด:

ตัวอย่าง

 #myDiv
{
   
transform: rotateX(150deg);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>

<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

`rotateY()` วิธีการ

rotateY() วิธีการหมุนองค์ประกอบรอบแกน Y ในระดับที่กำหนด:

ตัวอย่าง

 #myDiv
{
   
transform: rotateY(150deg);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>

<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

วิธีการ `rotateZ()`

rotateZ() วิธีการหมุนองค์ประกอบรอบแกน Z ของมันในระดับที่กำหนด:

ตัวอย่าง

 #myDiv
{
   
transform: rotateZ(90deg);
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>

<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

</body>
</html>

คุณสมบัติการแปลง CSS

ตารางต่อไปนี้แสดงรายการคุณสมบัติการแปลง 3 มิติทั้งหมด:

transform: ใช้การแปลง 2D หรือ 3D กับองค์ประกอบ
transform-origin: ช่วยให้คุณเปลี่ยนตำแหน่งขององค์ประกอบที่แปลงแล้ว
transform-style: ระบุวิธีการแสดงองค์ประกอบที่ซ้อนกันในพื้นที่ 3 มิติ
perspective: ระบุเปอร์สเปคทีฟเกี่ยวกับวิธีการดูองค์ประกอบ 3 มิติ
perspective-origin: ระบุตำแหน่งด้านล่างขององค์ประกอบ 3 มิติ
backface-visibility: กำหนดว่าควรมองเห็นองค์ประกอบหรือไม่เมื่อไม่หันหน้าเข้าหาหน้าจอ

วิธีการแปลง CSS 3D

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): กำหนดการแปลง 3 มิติโดยใช้เมทริกซ์ 4x4 จำนวน 16 ค่า
translate3d(x,y,z): กำหนดการแปล 3D
translateX(x): กำหนดการแปล 3D โดยใช้เฉพาะค่าสำหรับแกน X
translateY(y): กำหนดการแปล 3D โดยใช้เฉพาะค่าสำหรับแกน Y
translateZ(z): กำหนดการแปล 3D โดยใช้เฉพาะค่าสำหรับแกน Z
scale3d(x,y,z): กำหนดการเปลี่ยนแปลงขนาด 3 มิติ
scaleX(x): กำหนดการแปลงสเกล 3 มิติโดยให้ค่าสำหรับแกน X
scaleY(y): กำหนดการแปลงสเกล 3 มิติโดยให้ค่าสำหรับแกน Y
scaleZ(z): กำหนดการแปลงสเกล 3 มิติโดยให้ค่าสำหรับแกน Z
rotate3d(x,y,z,angle): กำหนดการหมุน 3 มิติ
rotateX(angle): กำหนดการหมุน 3 มิติตามแนวแกน X
rotateY(angle): กำหนดการหมุน 3 มิติตามแนวแกน Y
rotateZ(angle): กำหนดการหมุน 3 มิติตามแนวแกน Z
perspective(n): กำหนดมุมมองเปอร์สเปคทีฟสำหรับองค์ประกอบที่แปลงรูปแบบ 3 มิติ

การแปลง CSS 3D

สารบัญ