3.1 Cơ bản về các phép biến đổi kết hợp
CSS cho phép kết hợp nhiều phép biến đổi để tạo ra các hiệu ứng hình ảnh phức tạp. Các phép biến đổi này có thể bao gồm translate, rotate, scale và skew, có thể được kết hợp trong một thuộc tính transform.
Thuộc tính transform có thể chứa nhiều hàm phép biến đổi, được ngăn cách bởi khoảng trắng. Chúng sẽ được áp dụng tuần tự, theo thứ tự mà chúng được liệt kê. Hiểu cách các phép biến đổi khác nhau tương tác với nhau là chìa khóa để tạo ra các hoạt ảnh và hiệu ứng phức tạp.
Cú pháp:
element {
transform: function1() function2() ... functionN();
}
Ví dụ:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Di chuyển và quay
Trong ví dụ này, phần tử được di chuyển 50 pixel sang phải và 50 pixel xuống dưới, sau đó quay 45 độ.
Ví dụ:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Di chuyển và quay</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử trước tiên được di chuyển 50 pixel sang phải và xuống dưới, sau đó quay 45 độ theo chiều kim đồng hồ
3.2 Phân tích các tổ hợp khác nhau
1. Tỷ lệ và nghiêng
Trong ví dụ này, phần tử được phóng to 1.5 lần trên cả hai trục, sau đó bị nghiêng 20 độ trên trục X và 10 độ trên trục Y.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tỷ lệ và nghiêng</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử trước tiên được phóng to 1.5 lần trên cả hai trục, sau đó bị nghiêng 20 độ trên trục X và 10 độ trên trục Y
2. Di chuyển, quay và tỷ lệ
Trong ví dụ này, phần tử được di chuyển 100 pixel sang phải, quay 30 độ và phóng to 2 lần trên trục X và 1.5 lần trên trục Y.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Di chuyển, quay và tỷ lệ</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
-
.box: phần tử trước tiên được di chuyển 100 pixel sang phải, sau đó quay 30 độ và phóng to 2 lần trên trục X và 1.5 lần trên trục Y
3.3 Ảnh hưởng của thứ tự các phép biến đổi
Khi nhiều phép biến đổi được kết hợp, điều quan trọng là hiểu rằng chúng được áp dụng tuần tự. Điều này có nghĩa là mỗi phép biến đổi tiếp theo sẽ ảnh hưởng đến kết quả của phép biến đổi trước đó.
Trong ví dụ này, ta sẽ thấy cách thay đổi thứ tự của các phép biến đổi ảnh hưởng đến kết quả cuối cùng.
Ví dụ A: quay trước, di chuyển sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quay trước, di chuyển sau</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
Ví dụ B: di chuyển trước, quay sau
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Di chuyển trước, quay sau</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
Giải thích mã:
-
.box-a: phần tử trước tiên quay 45 độ, sau đó di chuyển 50 pixel sang phải và xuống dưới, dẫn đến việc phần tử di chuyển theo đường chéo từ vị trí mới sau khi quay -
.box-b: phần tử trước tiên di chuyển 50 pixel sang phải và xuống dưới, sau đó quay 45 độ, dẫn đến việc phần tử quay quanh vị trí mới của nó
GO TO FULL VERSION