การแปลง CSS 2D

สารบัญ

การแปลง CSS 2D

การแปลง CSS ช่วยให้คุณสามารถย้าย หมุน ปรับขนาด และเอียงองค์ประกอบได้

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

2D rotate

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

transform

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

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

Property
transform	36.0	10.0	16.0	9.0	23.0

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

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

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

เคล็ดลับ: คุณจะได้เรียนรู้เกี่ยวกับการแปลงร่าง 3 มิติในบทถัดไป

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

translate() วิธีการย้ายองค์ประกอบจากตำแหน่งปัจจุบัน (ตาม ไปยังพารามิเตอร์ที่กำหนดสำหรับแกน X และแกน Y)

ตัวอย่างต่อไปนี้ย้าย <div> องค์ประกอบ 50 พิกเซลไปทางขวา และลดลง 100 พิกเซลจากตำแหน่งปัจจุบัน:

ตัวอย่าง

div
{
   
transform: translate(50px, 100px);
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

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

rotate() วิธีการหมุนองค์ประกอบตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาตามระดับที่กำหนด

ตัวอย่างต่อไปนี้หมุน <div> องค์ประกอบตามเข็มนาฬิกาด้วย 20 องศา:

ตัวอย่าง

div
{
  transform: rotate(20deg);
}

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

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

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

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

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

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

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

</body>
</html>

การใช้ค่าลบจะหมุนองค์ประกอบทวนเข็มนาฬิกา

ตัวอย่างต่อไปนี้หมุน <div> องค์ประกอบทวนเข็มนาฬิกาด้วย 20 องศา:

ตัวอย่าง

div
{
   
transform: rotate(-20deg);
}

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

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

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

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

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

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

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

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

scale() วิธีการเพิ่มหรือลดขนาดขององค์ประกอบ (ตามพารามิเตอร์ที่กำหนดสำหรับความกว้างและความสูง)

ตัวอย่างต่อไปนี้เพิ่ม <div> องค์ประกอบให้เป็นสองเท่าของความกว้างเดิม และสามเท่าของความสูงเดิม:

ตัวอย่าง

div
{
   
transform: scale(2, 3);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

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

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

ตัวอย่างต่อไปนี้ลด <div> องค์ประกอบให้เป็นครึ่งหนึ่งของความกว้างและความสูงเดิม:

ตัวอย่าง

div
{
   
transform: scale(0.5, 0.5);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

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

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

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

scaleX() วิธีการเพิ่มหรือลด ความกว้างขององค์ประกอบ

ตัวอย่างต่อไปนี้เพิ่ม <div> องค์ประกอบให้เป็นสองเท่าของความกว้างเดิม:

ตัวอย่าง

div
{
   
transform: scaleX(2);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

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

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

ตัวอย่างต่อไปนี้ลด <div> องค์ประกอบให้เป็นครึ่งหนึ่งของความกว้างเดิม:

ตัวอย่าง

div
{
   
transform: scaleX(0.5);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

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

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

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

scaleY() วิธีการเพิ่มหรือลด ความสูงขององค์ประกอบ

ตัวอย่างต่อไปนี้เพิ่มองค์ประกอบ <div> ให้เป็นสามเท่าขององค์ประกอบดั้งเดิม ความสูง:

ตัวอย่าง

div
{
   
transform: scaleY(3);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

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

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

ตัวอย่างต่อไปนี้จะลด <div> องค์ประกอบให้เหลือเพียงครึ่งหนึ่งขององค์ประกอบดั้งเดิม ความสูง:

ตัวอย่าง

div
{
   
transform: scaleY(0.5);
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

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

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

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

skewX() วิธีการเอียงองค์ประกอบตามแนวแกน X ตามมุมที่กำหนด

ตัวอย่างต่อไปนี้เอียง <div> องค์ประกอบ 20 องศาตามแนว แกน X:

ตัวอย่าง

div
{
   
transform: skewX(20deg);
}

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

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

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

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

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

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

skewY() วิธีการเอียงองค์ประกอบตามแนวแกน Y ตามมุมที่กำหนด

ตัวอย่างต่อไปนี้เอียง <div> องค์ประกอบ 20 องศาตามแนวแกน Y:

ตัวอย่าง

div
{
   
transform: skewY(20deg);
}

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

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

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

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

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

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

skew() วิธีการเอียงองค์ประกอบตามแนวแกน X และ Y ตามมุมที่กำหนด

ตัวอย่างต่อไปนี้เอียงองค์ประกอบ <div> 20 องศาตามแนวแกน X และ 10 องศาตามแนวแกน Y:

ตัวอย่าง

div
{
   
transform: skew(20deg, 10deg);
}

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

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

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

หากไม่ได้ระบุพารามิเตอร์ตัวที่สอง จะมีค่าเป็นศูนย์ ตัวอย่างต่อไปนี้เอียงองค์ประกอบ <div> 20 องศาไปตามแกน X:

ตัวอย่าง

div
{
   
transform: skew(20deg);
}

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

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

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

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

<p>The skew() method skews an element into a given angle.</p>

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

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

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

วิธีการ matrix() จะรวมวิธีการแปลง 2D ทั้งหมดเป็นหนึ่งเดียว

เมธอด matrix() รับพารามิเตอร์ 6 ตัวซึ่งประกอบด้วยฟังก์ชันทางคณิตศาสตร์ ซึ่งช่วยให้คุณสามารถหมุน ปรับขนาด ย้าย (แปล) และเอียงองค์ประกอบได้

พารามิเตอร์มีดังนี้: matrix(scaleX(), skewY(), skewX(), scaleY(), แปลX(), แปลY())

ตัวอย่าง

div
{
    
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

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

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

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

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

<p>The matrix() method combines all the 2D transform methods into one.</p>

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

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

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

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

transform: ใช้การแปลง 2D หรือ 3D กับองค์ประกอบ
transform-origin: ช่วยให้คุณเปลี่ยนตำแหน่งขององค์ประกอบที่แปลงแล้ว

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

matrix(n,n,n,n,n,n): กำหนดการแปลง 2D โดยใช้เมทริกซ์ที่มีหกค่า
translate(x,y): กำหนดการแปล 2D โดยย้ายองค์ประกอบไปตามแกน X และ Y
translateX(n): กำหนดการแปล 2D โดยย้ายองค์ประกอบไปตามแกน X
translateY(n): กำหนดการแปล 2D โดยย้ายองค์ประกอบไปตามแกน Y
scale(x,y): กำหนดการเปลี่ยนแปลงขนาด 2D โดยเปลี่ยนความกว้างและความสูงขององค์ประกอบ
scaleX(n): กำหนดการเปลี่ยนแปลงขนาด 2D โดยเปลี่ยนความกว้างขององค์ประกอบ
scaleY(n): กำหนดการเปลี่ยนแปลงขนาด 2D โดยเปลี่ยนความสูงขององค์ประกอบ
rotate(angle): กำหนดการหมุน 2D โดยระบุมุมในพารามิเตอร์
skew(x-angle,y-angle): กำหนดการแปลงเอียง 2 มิติตามแนวแกน X และแกน Y
skewX(angle): กำหนดการแปลงเอียง 2 มิติตามแนวแกน X
skewY(angle): กำหนดการแปลงเอียง 2D ตามแนวแกน Y

การแปลง CSS 2D

สารบัญ