Hàm skew() trong CSS - Làm nghiêng phần tử 2D

Hàm skew() được dùng để làm nghiêng một phần tử trong mặt phẳng 2D. Thiết lập góc nghiêng làm tham số của hàm skew().

Ví dụ 1: Nghiêng theo trục X

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
  transform: translate(50px, 10%);
}
.skew_img {
  transform-origin: top left;
  transform: skew(45deg, 0);
}
</style>
</head>
<body>
<h1>Học tập</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Kết quả

Ví dụ 2: Sử dụng turn và deg

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
  transform: translate(50px, 10%);
}
.skew_img {
  transform-origin: top left;
  transform: skew(-0.06turn, 18deg);
}
</style>
</head>
<body>
<h1>Học tập</h1>
<img class="translate_img" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Kết quả

Cú pháp:

transform: skew(ax, ay);

• ax: Góc nghiêng theo trục X (bắt buộc)
• ay: Góc nghiêng theo trục Y (tùy chọn, mặc định 0)

Đơn vị: deg, grad, rad, turn. Sử dụng transform-origin để thay đổi điểm neo.