CSS 2D Transforms: การแปลงรูปแบบ 2 มิติ (Transform, Rotate, Scale, Skew)

การสร้าง animated web elements สำคัญสำหรับเว็บดีไซน์ เช่น ปุ่มที่ skew เมื่อ hover

นั่นคือที่มาของ CSS transform property ใช้ย้าย หมุน skew และ scale องค์ประกอบ ทำให้เว็บโต้ตอบได้มากขึ้น

บทเรียนนี้อธิบาย 2D transforms ใน CSS ด้วย transform property พร้อมตัวอย่าง จนจบคุณจะใช้ CSS 2D transforms อย่างเชี่ยวชาญ

CSS 2D Transforms คืออะไร?

CSS transform function สร้าง basic transform animations: rotations, movements, scales, skews บนเว็บ

เมื่อ transform องค์ประกอบ ไม่ส่งผลต่อองค์ประกอบใกล้เคียง แต่อาจทับซ้อนได้ ยังคงครอบครองพื้นที่ในตำแหน่งเดิม

มี 2 ประเภท: 2D และ 3D transform property ใช้ทั้งคู่ แต่บทความนี้เน้น 2D transforms

2D transformations ที่ใช้ได้:

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

translate() Transformation (การย้ายตำแหน่ง)

translate() ย้ายองค์ประกอบจากตำแหน่งปัจจุบันไปตำแหน่งใหม่

รับ 2 พารามิเตอร์: พิกเซลไปขวา (x), พิกเซลลงล่าง (y)

translate(xAxis, yAxis);

ตัวอย่าง: ย้ายกล่อง 25px ขวา, 50px ล่าง

/* HTML */
<body>
  <p>This is a paragraph of text.</p>
  <div><p>This is a box that has been moved using the translate() method.</p></div>
</body>

/* CSS */
div {
  transform: translate(25px, 50px);
  background-color: lightblue;
  border: 3px solid black;
}

กล่องเลื่อน 25px ขวา 50px ล่าง จากตำแหน่งเดิม

rotate() Transformation (การหมุน)

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

transform: rotate(Xdeg);

X = องศาที่ต้องการหมุน ค่าบวก = ตามเข็มนาฬิกา ค่าลบ = ทวนเข็มนาฬิกา

ตัวอย่าง: หมุนกล่อง 45 องศา

/* HTML */
<div><p>This is a box that has been rotated.</p></div>

/* CSS */
div {
  transform: rotate(45deg);
  background-color: lightblue;
  border: 3px solid black;
}

scale() Transformation (การปรับขนาด)

scale() เพิ่ม/ลด ขนาดองค์ประกอบ

transform: scale(x, y);

scale แบบสัดส่วน width (x) และ height (y) หากไม่ระบุ y จะเท่ากับ x

ตัวอย่าง: ขยายกล่อง 1.5 เท่า

div {
  transform: scale(1.5, 1.5);
  background-color: lightblue;
  border: 3px solid black;
}

กล่องใหญ่ที่สุด = 1.5 เท่าของกล่องต้นฉบับ

scaleX() Transformation

scaleX() ปรับความกว้างอย่างเดียว

transform: scaleX(xValue);

ตัวอย่าง: เพิ่มความกว้าง 1.6 เท่า (โค้ดใช้ 1.5)

div { transform: scaleX(1.5); ... }

scaleY() Transformation

scaleY() ปรับความสูงอย่างเดียว

transform: scaleY(yValue);

ตัวอย่าง: ลดความสูงเหลือครึ่ง (0.5)

div { transform: scaleY(0.5); ... }

skew() Transformation (การบิด)

skew() บิดองค์ประกอบตามแกน x และ y ตามองศาที่ระบุ

transform: skew(xValue, yValue);

xValue = องศาบิดแกน x, yValue = องศาบิดแกน y หากไม่ระบุ yValue = ไม่บิดแกน y

ตัวอย่าง: บิด 10deg แกน x, 15deg แกน y

div {
  transform: skew(10deg, 15deg);
  background-color: lightblue;
  border: 3px solid black;
}

skewX() และ skewY()

ย่อยของ skew() สำหรับแกนเดียว:

transform: skewX(xValue);  /* แกน X เท่านั้น */
transform: skewY(yValue);  /* แกน Y เท่านั้น */

matrix() Transformation (รวมทุก Transform)

matrix() รวม transform 2D ทั้งหมด: translate, rotate, scale, skew ในบรรทัดเดียว

รับ 6 พารามิเตอร์:

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

ตัวอย่าง: ใช้ matrix() แทนหลาย transform

ต้องการ: scaleX=1, skewY=10deg, skewX=10deg, scaleY=1.25, translateX=25px, translateY=25px

div {
  transform: matrix(1, 10, 10, 1.25, 25, 25);
  background-color: lightblue;
  border: 3px solid black;
}

ใช้ matrix() เขียน transformations ทั้งหมดในบรรทัดเดียว

สรุป

transform property ใช้ transformations บนองค์ประกอบ CSS มี 2D transformations: skew, scale, rotate, translate สำหรับ transform web elements บทเรียนนี้ครอบคลุม 2D CSS transformations พื้นฐาน ตอนนี้คุณพร้อมสร้าง 2D transformations ของตัวเองอย่างมืออาชีพ!