2.1 Thuộc tính transform-origin
Thuộc tính transform-origin trong CSS xác định điểm mà các chuyển đổi như rotate, scale, skew, và translate được áp dụng. Mặc định, điểm này nằm ở trung tâm của phần tử, nhưng bạn có thể thay đổi vị trí để đạt được hiệu ứng hình ảnh mong muốn.
Cơ bản về transform-origin
Cú pháp của thuộc tính transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Trong đó:
x-axis: xác định vị trí điểm theo trục ngangy-axis: xác định vị trí điểm theo trục dọcz-axis: xác định vị trí điểm theo trục Z (sử dụng cho chuyển đổi 3D)
Giá trị khả dụng:
- Từ khóa:
top,right,bottom,left,center - Giá trị phần trăm: xác định điểm gốc theo phần trăm kích thước của phần tử
- Giá trị tuyệt đối: xác định điểm gốc theo pixel hoặc các đơn vị đo lường khác
Ví dụ về giá trị:
transform-origin: 50% 50%;— trung tâm của phần tử (giá trị mặc định)transform-origin: 0 0;— góc trên bên trái của phần tửtransform-origin: 100% 100%;— góc dưới bên phải của phần tửtransform-origin: 50px 100px;— dời 50 pixel sang phải và 100 pixel xuống dưới từ góc trên bên trái
Định tâm điểm gốc (mặc định)
Trong ví dụ này, chuyển đổi rotate sẽ diễn ra xung quanh trung tâm của phần tử.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Định tâm điểm gốc</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Dịch chuyển điểm
Dịch chuyển điểm gốc sang góc trên bên trái
Trong ví dụ này, điểm gốc của chuyển đổi được dịch chuyển sang góc trên bên trái của phần tử.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Điểm gốc ở góc trên bên trái</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Dịch chuyển điểm gốc sang góc dưới bên phải
Trong ví dụ này, điểm gốc của chuyển đổi được dịch chuyển sang góc dưới bên phải của phần tử.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Điểm gốc ở góc dưới bên phải</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Đặt giá trị
Sử dụng giá trị phần trăm
Trong ví dụ này, điểm gốc của chuyển đổi nằm ở 25% theo chiều ngang và 75% theo chiều dọc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Điểm gốc với giá trị phần trăm</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Sử dụng giá trị tuyệt đối
Trong ví dụ này, điểm gốc của chuyển đổi được dịch chuyển 50 pixel theo chiều ngang và 20 pixel theo chiều dọc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Điểm gốc với giá trị tuyệt đối</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Ứng dụng thực tế
Quay phần tử quanh một điểm cụ thể
Sử dụng transform-origin hữu ích cho việc tạo các phần tử quay quanh một điểm nhất định. Ví dụ, tạo kim giờ của đồng hồ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quay kim giờ đồng hồ</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Ví dụ cho vị trí chỉ 1 giờ */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Tạo phần tử có thể thay đổi kích thước
Thay đổi điểm gốc cũng hữu ích để tạo kích thước phần tử thay đổi dựa trên các điểm khác nhau, điều này có thể hữu ích trong việc tạo giao diện động.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phần tử có thể thay đổi kích thước</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION