1.1 Thuộc tính transform
CSS-transformations cho phép thay đổi vị trí, kích thước, xoay và nghiêng các phần tử mà không làm thay đổi dòng chảy thông thường
của tài liệu. Đây là công cụ mạnh mẽ để tạo ra các giao diện web tương tác và động. Hãy xét những điều căn bản
của transformations sử dụng các thuộc tính transform, translate, rotate, scale và skew.
Thuộc tính transform cho phép áp dụng các phép biến đổi 2D và 3D lên các phần tử. Nó kết hợp nhiều
hàm biến đổi khác nhau, như translate, rotate, scale và skew.
Cú pháp:
element {
transform: transformation-function;
}
Ở đâu:
transformation-function: hàm biến đổi được áp dụng cho phần tử
Ví dụ sử dụng:
.element {
transform: translate(50px, 100px);
}
1.2 Biến đổi translate
Biến đổi translate được sử dụng để di chuyển phần tử dọc theo trục X và/hoặc Y.
Cú pháp:
element {
transform: translate(x, y);
}
Ở đâu:
x: dịch chuyển dọc theo trục X (có thể âm hoặc dương)y: dịch chuyển dọc theo trục Y (có thể âm hoặc dương)
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biến đổi translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử có kích thước và màu sắc cố định.box:hover: khi di chuột vào phần tử, phép biến đổitranslate(50px, 50px)được áp dụng, di chuyển nó 50 pixel sang bên phải và xuống dưới
1.3 Biến đổi rotate
Biến đổi rotate được sử dụng để xoay phần tử quanh trung tâm của nó.
Cú pháp:
element {
transform: rotate(angle);
}
Ở đâu:
angle: góc xoay tính bằng độ (có thể âm hoặc dương)
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biến đổi rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử có kích thước và màu sắc cố định.box:hover: khi di chuột vào phần tử, phép biến đổirotate(45deg)được áp dụng, xoay nó 45 độ theo chiều kim đồng hồ
1.4 Biến đổi scale
Biến đổi scale được sử dụng để thay đổi kích thước phần tử dọc theo trục X và/hoặc Y.
Cú pháp:
element {
transform: scale(sx, sy);
}
Ở đâu:
sx: tỷ lệ theo trục X (giá trị lớn hơn 1 tăng kích thước phần tử, nhỏ hơn 1 giảm)sy: tỷ lệ theo trục Y (giá trị lớn hơn 1 tăng kích thước phần tử, nhỏ hơn 1 giảm)
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biến đổi scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử có kích thước và màu sắc cố định-
.box:hover: khi di chuột vào phần tử, phép biến đổiscale(1.5, 1.5)được áp dụng, tăng kích thước của nó lên 1.5 lần theo cả hai trục
1.5 Biến đổi skew
Biến đổi skew được sử dụng để nghiêng phần tử dọc theo trục X và/hoặc Y.
Cú pháp:
element {
transform: skew(ax, ay);
}
Ở đâu:
ax: góc nghiêng theo trục X (có thể âm hoặc dương)ay: góc nghiêng theo trục Y (có thể âm hoặc dương)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biến đổi skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử có kích thước và màu sắc cố định..box:hover: khi di chuột vào phần tử, phép biến đổiskew(20deg, 10deg)được áp dụng, nghiêng nó 20 độ theo trục X và 10 độ theo trục Y.
1.6 Kết hợp các phép biến đổi khác nhau
Thuộc tính transform cho phép kết hợp nhiều hàm biến đổi để đạt được các hiệu ứng phức tạp.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kết hợp biến đổi</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Giải thích mã:
.box: phần tử có kích thước và màu sắc cố định.box:hover: khi di chuột vào phần tử, đồng thời các phép biến đổitranslate,rotate,scalevàskewđược áp dụng, tạo ra hiệu ứng phức tạp
GO TO FULL VERSION