การแปลงรูปแบบ 2D ขององค์ประกอบด้วย CSS3

2D Transformation: เปลี่ยนรูปทรงองค์ประกอบ 2 มิติ

CSS3 2D Transforms ใช้ transform property กับฟังก์ชัน: matrix, translate, scale, rotate, skew เปลี่ยน visual rendering ไม่กระทบ layout flow

ตารางฟังก์ชัน 2D Transform

Sr.No.	Value & Description
1	matrix(n,n,n,n,n,n) – Matrix transforms 6 ค่า
2	translate(x,y) – เลื่อนตาม X, Y axis
3	translateX(n) – เลื่อนตาม X axis
4	translateY(n) – เลื่อนตาม Y axis
5	scale(x,y) – เปลี่ยนความกว้าง/สูง
6	scaleX(n) – เปลี่ยนความกว้าง

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { width: 100px; height: 100px; background-color: rgb(255, 17, 0); border: 2px solid black; margin: 20px; display: inline-block; color: white; }
    .rotate { transform: rotate(20deg); }
    .translate { transform: translate(30px, 20px); }
    .scale { transform: scale(2, 1); margin-left: 70px; }
    .skew { transform: skew(20deg); }
  </style>
</head>
<body>
  <h1>2D Transformation of Elements</h1>
  <div class="rotate">ROTATE</div>
  <div class="skew">SKEW</div>
  <div class="scale">SCALE</div>
  <div class="translate">TRANSLATE</div>
</body>
</html>

Transform Functions เพิ่มเติม

scaleY(n) – ขยาย/หด แนวตั้ง
skewX(angle) – บิดแกน X
skewY(angle) – บิดแกน Y
matrix(a,b,c,d,e,f) – รวมทุก transform ใน matrix เดียว

Transform Origin

transform-origin: 50% 50%; /* default center */
transform-origin: top left; /* มุมซ้ายบน */
transform-origin: 100px 50px; /* พิกเซลแน่นอน */

3D Transforms (สรุป)

เพิ่ม: translateZ, translate3d, rotateX, rotateY, rotateZ, scaleZ, scale3d, perspective, matrix3d ต้องมี perspective บน parent หรือใน transform