การแปลง CSS 2D
การแปลง CSS 2D
การแปลง CSS ช่วยให้คุณย้าย หมุน ปรับขนาด และองค์ประกอบเอียงได้
วางเมาส์เหนือองค์ประกอบด้านล่างเพื่อดูการแปลง 2D:
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติ 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()ย้ายองค์ประกอบจากตำแหน่งปัจจุบัน (ตามพารามิเตอร์ที่กำหนดสำหรับแกน X และแกน Y)
ตัวอย่างต่อไปนี้ย้าย <div> องค์ประกอบ 50 พิกเซลไปทางขวา และ 100 พิกเซลลงจากตำแหน่งปัจจุบัน:
ตัวอย่าง
div
{
transform: translate(50px, 100px);
}
การหมุน () วิธีการ
วิธี การrotate()หมุนองค์ประกอบตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาตามระดับที่กำหนด
ตัวอย่างต่อไปนี้จะหมุนองค์ประกอบ <div> ตามเข็มนาฬิกาเป็น 20 องศา:
ตัวอย่าง
div
{
transform: rotate(20deg);
}
การใช้ค่าลบจะหมุนองค์ประกอบทวนเข็มนาฬิกา
ตัวอย่างต่อไปนี้จะหมุนองค์ประกอบ <div> ทวนเข็มนาฬิกาเป็น 20 องศา:
ตัวอย่าง
div
{
transform: rotate(-20deg);
}
มาตราส่วน() วิธีการ
วิธี การscale()นี้จะเพิ่มหรือลดขนาดขององค์ประกอบ (ตามพารามิเตอร์ที่กำหนดสำหรับความกว้างและความสูง)
ตัวอย่างต่อไปนี้จะเพิ่มองค์ประกอบ <div> เป็นสองเท่าของความกว้างเดิม และสามเท่าของความสูงเดิม:
ตัวอย่าง
div
{
transform: scale(2, 3);
}
ตัวอย่างต่อไปนี้จะลดองค์ประกอบ <div> ให้เหลือครึ่งหนึ่งของความกว้างและความสูงเดิม:
ตัวอย่าง
div
{
transform: scale(0.5, 0.5);
}
สเกลX() เมธอด
วิธี การscaleX()นี้จะเพิ่มหรือลดความกว้างขององค์ประกอบ
ตัวอย่างต่อไปนี้จะเพิ่ม <div> องค์ประกอบเป็นสองเท่าของความกว้างเดิม:
ตัวอย่าง
div
{
transform: scaleX(2);
}
ตัวอย่างต่อไปนี้จะลดองค์ประกอบ <div> ให้เหลือครึ่งหนึ่งของความกว้างเดิม:
ตัวอย่าง
div
{
transform: scaleX(0.5);
}
วิธีสเกลY()
วิธี การscaleY()นี้จะเพิ่มหรือลดความสูงขององค์ประกอบ
ตัวอย่างต่อไปนี้จะเพิ่มองค์ประกอบ <div> เป็นสามเท่าของความสูงเดิม:
ตัวอย่าง
div
{
transform: scaleY(3);
}
ตัวอย่างต่อไปนี้ลดองค์ประกอบ <div> ให้เหลือครึ่งหนึ่งของความสูงเดิม:
ตัวอย่าง
div
{
transform: scaleY(0.5);
}
วิธีการ skewX()
วิธี การskewX()เอียงองค์ประกอบตามแนวแกน X ตามมุมที่กำหนด
ตัวอย่างต่อไปนี้เอียงองค์ประกอบ <div> 20 องศาตามแนวแกน X:
ตัวอย่าง
div
{
transform: skewX(20deg);
}
The skewY() วิธีการ
วิธี การskewY()เอียงองค์ประกอบตามแกน Y ตามมุมที่กำหนด
ตัวอย่างต่อไปนี้เอียงองค์ประกอบ <div> 20 องศาตามแนวแกน Y:
ตัวอย่าง
div
{
transform: skewY(20deg);
}
The skew() Method
วิธี การskew()เอียงองค์ประกอบตามแกน X และ Y ตามมุมที่กำหนด
ตัวอย่างต่อไปนี้เอียงองค์ประกอบ <div> 20 องศาตามแนวแกน X และ 10 องศาตามแนวแกน Y:
ตัวอย่าง
div
{
transform: skew(20deg, 10deg);
}
หากไม่ได้ระบุพารามิเตอร์ที่สอง จะมีค่าเป็นศูนย์ ดังนั้น ตัวอย่างต่อไปนี้จะเอียงองค์ประกอบ <div> 20 องศาตามแนวแกน X:
ตัวอย่าง
div
{
transform: skew(20deg);
}
เมทริกซ์ () เมธอด
วิธี การmatrix()นี้รวมวิธีการแปลง 2D ทั้งหมดเข้าไว้ด้วยกัน
เมธอด matrix() ใช้พารามิเตอร์ 6 ตัว ซึ่งประกอบด้วยฟังก์ชันทางคณิตศาสตร์ ซึ่งช่วยให้คุณหมุน ปรับขนาด ย้าย (แปล) และองค์ประกอบเอียงได้
พารามิเตอร์มีดังนี้: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
ตัวอย่าง
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
คุณสมบัติการแปลง CSS
ตารางต่อไปนี้แสดงรายการคุณสมบัติการแปลง 2D ทั้งหมด:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
วิธีการแปลง CSS 2D
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |