CSS การเปลี่ยนแปลง 2D

CSS การเปลี่ยนแปลง 2D

CSS การเปลี่ยนทิศทาง (transforms) อนุญาตให้คุณย้าย、หมุน、ยุทธิ์และความเบนขององค์ประกอบ

เคลื่อนที่เมาส์ไปยังองค์ประกอบด้านล่างเพื่อดูการเปลี่ยนทิศทาง 2D:

2D rotate

ในบทนี้คุณจะเรียนรู้ CSS ทางเลือกตัวแปลดังนี้:

  • transform

การสนับสนุนโปรแกรมนี้

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

คุณสมบัติ Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

วิธีการเปลี่ยนแปลง 2D ของ CSS

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

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

คำเตือน：คุณจะเรียนรู้ 3D การเปลี่ยนทิศทางในบทดังต่อไป:

วิธี translate()

Translate

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

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

ตัวอย่าง

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

ลองทดลองด้วยตัวเอง

วิธี rotate()

Rotate

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

ตัวอย่างดังนี้หมุน <div> ออกไปทางทิศตะวันตก 20 องศา:

ตัวอย่าง

div {
  transform: rotate(20deg);
}

ลองทดลองด้วยตัวเอง

ใช้ค่าลบเพื่อหมุนองค์ประกอบไปทางทิศตะวันออก

ตัวอย่างดังนี้หมุน <div> ออกไปทางทิศตะวันออก 20 องศา:

ตัวอย่าง

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

ลองทดลองด้วยตัวเอง

วิธี scale()

Scale

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

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

ตัวอย่าง

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

ลองทดลองด้วยตัวเอง

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

ตัวอย่าง

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

ลองทดลองด้วยตัวเอง

วิธี scaleX()

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

ตัวอย่างดังนี้ขยาย <div> ออกเป็นสองเท่าความกว้างเดิมของมัน:

ตัวอย่าง

div {
  transform: scaleX(2);
}

ลองทดลองด้วยตัวเอง

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

ตัวอย่าง

div {
  transform: scaleX(0.5);
}

ลองทดลองด้วยตัวเอง

วิธี scaleY()

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

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

ตัวอย่าง

div {
  transform: scaleY(3);
}

ลองทดลองด้วยตัวเอง

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

ตัวอย่าง

div {
  transform: scaleY(0.5);
}

ลองทดลองด้วยตัวเอง

วิธี skewX()

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

ตัวอย่างด้านล่างนี้ทำให้ <div> องค์ประกอบเลื่อนตามเส้น X 20 องศา:

ตัวอย่าง

div {
  transform: skewX(20deg);
}

ลองทดลองด้วยตัวเอง

วิธี skewY()

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

ตัวอย่างด้านล่างนี้ทำให้ <div> องค์ประกอบเลื่อนตามเส้น Y 20 องศา:

ตัวอย่าง

div {
  transform: skewY(20deg);
}

ลองทดลองด้วยตัวเอง

วิธี skew()

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

ตัวอย่างด้านล่างนี้ทำให้ <div> องค์ประกอบเลื่อนตามเส้น X 20 องศา และเลื่อนตามเส้น Y 10 องศา:

ตัวอย่าง

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

ลองทดลองด้วยตัวเอง

ถ้าไม่ได้กำหนดตัวแปรที่สอง ค่าจะเท่ากับ 0 ดังนั้น ตัวอย่างด้านล่างนี้ทำให้ <div> องค์ประกอบเลื่อนตามเส้น X 20 องศา:

ตัวอย่าง

div {
  transform: skew(20deg);
}

ลองทดลองด้วยตัวเอง

วิธี matrix()

Rotate

matrix() วิธีนี้รวบรวมทุกวิธีการเปลี่ยนแปลง 2D เข้าด้วยกัน。

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

ตัวแปรต่างๆ ดังนี้: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

ตัวอย่าง

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

ลองทดลองด้วยตัวเอง

คุณสมบัติการเปลี่ยนแปลง CSS

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

คุณสมบัติ รายละเอียด
transform ใช้การเปลี่ยนแปลง 2D หรือ 3D บนองค์ประกอบ。
transform-origin อนุญาตให้คุณเปลี่ยนที่ตั้งขององค์ประกอบที่ถูกเปลี่ยนแปลง。

วิธีการเปลี่ยนแปลง 2D ของ CSS

ฟังก์ชัน รายละเอียด
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) นิยามการเปลี่ยนแปลงการเลื่อนแนวตั้ง ตามเส้น X และ Y
skewX(angle) นิยามการเปลี่ยนแปลงการเลื่อนแนวตั้ง ตามเส้น X
skewY(angle) นิยามการเปลี่ยนแปลงการเลื่อนแนวตั้ง ตามเส้น Y