การแปลง 2D ใช้เพื่อเปลี่ยนโครงสร้างองค์ประกอบใหม่เป็นการแปล หมุน ปรับขนาด และเอียง
ต่อไปนี้เป็นฟังก์ชันการแปลง 2 มิติบางส่วน -
| ซีเนียร์ | คุณค่าและรายละเอียด |
|---|---|
| 1 | เมทริกซ์(n,n,n,n,n,n) ใช้เพื่อกำหนดการแปลงเมทริกซ์ด้วยค่าหกค่า |
| 2 | แปล(x,y) ใช้เพื่อแปลงองค์ประกอบพร้อมกับแกน x และแกน y |
| 3 | แปลX(n) ใช้เพื่อแปลงองค์ประกอบพร้อมกับแกน x |
| 4 | แปลY(n) ใช้เพื่อแปลงองค์ประกอบพร้อมกับแกน y |
| 5 | สเกล(x,y) ใช้สำหรับเปลี่ยนความกว้างและความสูงขององค์ประกอบ |
| 6 | สเกลX(n) ใช้สำหรับเปลี่ยนความกว้างขององค์ประกอบ |
ต่อไปนี้เป็นโค้ดที่แสดงฟังก์ชันการแปลง 2D ใน CSS3 -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(98, 0, 255);
margin: 20px;
display: inline-block;
color: white;
}
.rotate {
transform: rotate(20deg);
}
.translate {
transform: translate(30px, 20px);
}
.scale {
transform: scale(2, 1);
margin-left:70px;
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transform functions</h1>
<div class="rotate">ROTATE</div>
<div class="skew">
SKEW
</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
