CSS3 - การแปลง 2d
การแปลง 2D ใช้เพื่อเปลี่ยนโครงสร้างองค์ประกอบอีกครั้งเช่นแปลหมุนปรับขนาดและเอียง
ตารางต่อไปนี้มีค่าทั่วไปที่ใช้ในการแปลง 2D -
| ซีเนียร์ | มูลค่าและรายละเอียด |
|---|---|
| 1 | matrix(n,n,n,n,n,n) ใช้เพื่อกำหนดการแปลงเมทริกซ์ด้วยค่าหกค่า |
| 2 | translate(x,y) ใช้เพื่อแปลงองค์ประกอบพร้อมกับแกน x และแกน y |
| 3 | translateX(n) ใช้ในการแปลงองค์ประกอบพร้อมกับแกน x |
| 4 | translateY(n) ใช้ในการแปลงองค์ประกอบพร้อมกับแกน y |
| 5 | scale(x,y) ใช้เพื่อเปลี่ยนความกว้างและความสูงขององค์ประกอบ |
| 6 | scaleX(n) ใช้เพื่อเปลี่ยนความกว้างขององค์ประกอบ |
| 7 | scaleY(n) ใช้เพื่อเปลี่ยนความสูงขององค์ประกอบ |
| 8 | rotate(angle) ใช้เพื่อหมุนองค์ประกอบตามมุม |
| 9 | skewX(angle) ใช้เพื่อกำหนดการแปลงเอียงพร้อมกับแกน x |
| 10 | skewY(angle) ใช้เพื่อกำหนดการแปลงเอียงพร้อมกับแกน y |
ตัวอย่างต่อไปนี้แสดงตัวอย่างคุณสมบัติข้างต้นทั้งหมด
หมุน 20 องศา
การหมุนกล่องด้วยมุม 20 องศาดังแสดงด้านล่าง -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
หมุน -20 องศา
การหมุนกล่องด้วยมุม -20 องศาดังแสดงด้านล่าง -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เอียงแกน X
การหมุนกล่องด้วยแกน x เอียงตามที่แสดงด้านล่าง -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เอียงแกน Y
การหมุนกล่องด้วยแกน y เอียงดังแสดงด้านล่าง -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
การแปลงเมทริกซ์
การหมุนกล่องด้วยการแปลงเมทริกซ์ดังที่แสดงด้านล่าง -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เมทริกซ์แปลงไปในทิศทางอื่น
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -