Giới thiệu
Hàm scaleX(x) thay đổi tỷ lệ của phần tử theo trục X (chiều ngang). Là một dạng đặc biệt của scale(x, y) với y = 1.
Cú pháp
transform: scaleX(<number>);
x: Hệ số tỷ lệ.1= gốc,>1= kéo giãn ngang,0 < x < 1= thu hẹp,<0= lật ngang + scale- Tâm biến đổi mặc định:
transform-origin: 50% 50%(trung tâm)
Ví dụ: scaleX(0.5) — Thu hẹp ngang 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: scaleX(0.5); /* Thu hẹp ngang 50% */
transform-origin: left center; /* Neo ở trái */
}
.box:hover { transform: scaleX(1); }
</style>
</head>
<body>
<div class="box">Gốc (60px)</div>
<div class="box scaled">scaleX(0.5)</div>
<p>Di chuột vào hộp đỏ để thấy scaleX(1)</p>
</body>
</html>
transform-origin — Thay đổi tâm scale
/* Mặc định: center center (giữa) */ transform-origin: 50% 50%; transform: scaleX(0.5); /* Co đều 2 bên */ /* Neo trái: co từ phải sang trái */ transform-origin: left center; transform: scaleX(0.5); /* Neo phải: co từ trái sang phải */ transform-origin: right center; transform: scaleX(0.5); /* Tùy chỉnh pixel */ transform-origin: 20px 50%; transform: scaleX(0.5);
Kết hợp với scaleY / scale
/* Tương đương nhau */ transform: scale(2, 3); transform: scaleX(2) scaleY(3); transform: scaleY(3) scaleX(2); /* Thứ tự không quan trọng cho scale */
Ứng dụng thực tế
- Flip card:
scaleX(-1)lật ngang (mirror) - Loading bar:
scaleX(0) → scaleX(1)animation - Hover effect: Button伸展 ngang
- Mirror effect:
scaleX(-1)cho text/icon đối xứng - Responsive squish: Giữ aspect ratio khi container thay đổi
Lưu ý
scaleX(0)làm element biến mất (width = 0) — dùng cho animation hide/showscaleX(-1)lật ngang nhưng không đảo ngược text direction (text vẫn đọc left-to-right)- Kết hợp
transform-originđể kiểm soát điểm neo co/giãn - Performance:
transformdùng GPU, tốt hơnwidthanimation