Giới thiệu
Hàm skewY(angle) làm nghiêng phần tử theo trục Y (trục dọc), tạo hiệu ứng hình bình hành đứng. Các đường ngang vẫn song song, đường dọc bị nghiêng.
Cú pháp
transform: skewY(<angle>); /* angle: deg, grad, rad, turn */
Ví dụ: skewY(20deg)
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 100px;
background-color: #e8f4fd;
border: 1px solid #3498db;
margin-bottom: 20px;
font-family: system-ui, sans-serif;
display: flex;
align-items: center;
padding: 0 20px;
}
#skewDiv {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari cũ */
transform: skewY(20deg); /* Chuẩn */
background-color: #ffeaa7;
border-color: #f39c12;
}
</style>
</head>
<body>
<div class="box">Bình thường (không skew)</div>
<div class="box" id="skewDiv">skewY(20deg) - Nghiêng theo trục Y</div>
</body>
</html>
Hình dung skewY
Bình thường (hình chữ nhật): skewY(20deg) (hình bình hành): ┌─────────────────────┐ ╱─────────────────────╲ │ │ ╱ ╲ │ Nội dung │ ╱ Nội dung (cũng nghiêng)╲ │ │ ╱ ╲ └─────────────────────┘ ╱─────────────────────────────╲ Đường ngang: song song Đường ngang: VẪN song song Đường dọc: thẳng đứng Đường dọc: NGHIÊNG 20°
Kết hợp skewX + skewY = skew()
/* Tương đương */ transform: skewX(10deg) skewY(20deg); transform: skew(10deg, 20deg); /* skew(x, y) */ /* Lưu ý: skew(x, y) ≠ skewX(x) skewY(y) về mặt ma trận, nhưng kết quả nhìn tương tự */
Ứng dụng thực tế
- Hình học decorative: Background shape, divider nghiêng
- Button/badge nghiêng: Tạo cảm giác động, hiện đại
- Card hover effect: Nghiêng nhẹ khi hover
- Parallelogram layout: Section divider, hero shape
- Text effect: Kết hợp
transform: skewY(-10deg)trên container,skewY(10deg)trên text con để text thẳng nhưng bg nghiêng
Kỹ thuật: Background nghiêng, Text thẳng
<style>
.skewed-bg {
position: relative;
overflow: hidden;
}
.skewed-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #667eea, #764ba2);
transform: skewY(-6deg);
transform-origin: top left;
z-index: -1;
}
.skewed-bg .content {
/* Text thẳng, không bị skew */
}
</style>
Lưu ý
- Góc dương (
+deg): Nghiêng theo chiều kim đồng hồ (trên sang phải, dưới sang trái) - Góc âm (
-deg): Nghiêng ngược chiều kim đồng hồ - Nội dung con (text, img) cũng bị nghiêng theo — dùng kỹ thuật pseudo-element nếu muốn content thẳng
- Có thể gây overflow container — cần
overflow: hiddentrên parent