Transform scaleY() — Tỷ lệ theo trục Y với CSS3

Giới thiệu

Hàm scaleY(y) thay đổi tỷ lệ của phần tử theo trục Y (chiều dọc). Là dạng đặc biệt của scale(x, y) với x = 1.

Cú pháp

transform: scaleY(<number>);

• y: Hệ số tỷ lệ. 1 = gốc, >1 = kéo dãn dọc, 0 < y < 1 = thu hẹp, <0 = lật dọc + scale
• Tâm mặc định: transform-origin: 50% 50%

Ví dụ: scaleY(0.5) — Thu hẹp dọc 50%

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 60px; height: 60px;
      background: #f39c12;
      display: inline-block;
      margin: 20px;
      transition: transform 0.3s ease;
    }
    
    .scaled {
      background: #e74c3c;
      transform: scaleY(0.5);  /* Thu hẹp dọc 50% */
      transform-origin: center top;  /* Neo ở đỉnh */
    }
    
    .box:hover { transform: scaleY(1); }
  </style>
</head>
<body>
  <div class="box">Gốc (60px)</div>
  <div class="box scaled">scaleY(0.5)</div>
  <p>Di chuột vào hộp đỏ để thấy scaleY(1)</p>
</body>
</html>

transform-origin cho scaleY

/* Mặc định: center center — co đều trên/dưới */
transform-origin: center center;
transform: scaleY(0.5);

/* Neo đỉnh: co từ dưới lên */
transform-origin: center top;
transform: scaleY(0.5);

/* Neo đáy: co từ trên xuống */
transform-origin: center bottom;
transform: scaleY(0.5);

Ứng dụng thực tế

• Accordion/collapse: scaleY(0) → scaleY(1) với transform-origin: top cho animation mượt
• Flip card dọc: scaleY(-1) lật dọc
• Progress bar dọc: Scale chiều cao
• Hover grow: Button/phần tử lớn dần theo chiều dọc
• Squish effect: scaleY(0.8) scaleX(1.2) cho cảm giác nén/bật nhảy

Animation ví dụ: Accordion mượt mà

<style>
  .accordion-content {
    overflow: hidden;
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform 0.3s ease-out;
  }
  .accordion.open .accordion-content {
    transform: scaleY(1);
  }
</style>

<div class="accordion">
  <button onclick="this.parentElement.classList.toggle('open')">Toggle</button>
  <div class="accordion-content">Nội dung collapse...</div>
</div>

Lưu ý

• scaleY(0) ẩn element (height = 0) — phù hợp animation collapse
• scaleY(-1) lật dọc — text sẽ ngược (đọc bottom-to-top)
• Khi animate height thực tế, dùng height: auto + JS hoặc grid-template-rows: 0fr → 1fr cho mượt hơn scaleY
• Performance: transform (GPU) tốt hơn animate height (layout thrashing)