Thuộc tính transform-origin
Thuộc tính transform-origin thiết lập điểm,
mà so với nó các phép biến đổi của phần tử
được xác định bởi thuộc tính transform sẽ xảy ra.
Mặc định điểm này là trung tâm phần tử,
và, ví dụ, phép xoay sẽ xảy ra so với
trung tâm của nó. Tuy nhiên, hành vi này có thể thay đổi
và buộc phần tử xoay so với
cạnh của nó, góc hoặc thậm chí so với
một điểm nằm ngoài phần tử.
Cú pháp
bộ chọn {
transform-origin: trục-X trục-Y trục-Z;
}
Giá trị theo các trục Y và Z không bắt buộc, có thể bỏ qua chúng (chúng sẽ nhận giá trị mặc định). Việc dịch chuyển điểm theo trục Z cần cho các phép biến đổi 3D.
Giá trị cho trục X
| Giá trị | Mô tả |
|---|---|
| Đơn vị CSS | Giá trị là bất kỳ đơn vị kích thước, xác định khoảng cách của tâm biến đổi từ cạnh trái phần tử. Giá trị dương dịch chuyển tâm biến đổi sang phải (vào trong phần tử), còn giá trị âm - sang trái (ra ngoài phần tử) so với cạnh trái phần tử. |
left |
Điểm xoay theo chiều ngang tại cạnh trái phần tử. |
right |
Điểm xoay theo chiều ngang tại cạnh phải phần tử. |
center |
Điểm xoay theo chiều ngang tại trung tâm phần tử. |
Giá trị mặc định: center.
Giá trị cho trục Y
| Giá trị | Mô tả |
|---|---|
| Đơn vị CSS | Giá trị là bất kỳ đơn vị kích thước, xác định khoảng cách của tâm biến đổi từ cạnh trên phần tử. Giá trị dương dịch chuyển tâm biến đổi xuống dưới (vào trong phần tử), còn giá trị âm - lên trên (ra ngoài phần tử) so với cạnh trên phần tử. |
top |
Điểm xoay theo chiều dọc tại cạnh trên phần tử. |
bottom |
Điểm xoay theo chiều dọc tại cạnh dưới phần tử. |
center |
Điểm xoay theo chiều dọc tại trung tâm phần tử. |
Giá trị mặc định: center.
Giá trị theo trục Z
| Giá trị | Mô tả |
|---|---|
| Đơn vị CSS | Giá trị là bất kỳ đơn vị kích thước, xác định khoảng cách của tâm biến đổi từ mặt phẳng phần tử. Giá trị dương dịch chuyển nó về phía chúng ta (từ mặt phẳng màn hình), còn giá trị âm thì ra xa chúng ta. |
Giá trị mặc định: 0px.
Ví dụ
Hiện tại giá trị của thuộc tính transform-origin chưa được thiết lập và khối sẽ xoay so với trung tâm của nó. Di chuột lên khối để thấy hiệu ứng:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Ví dụ
Và bây giờ khi di chuột, khối sẽ xoay so với góc trên bên trái:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Ví dụ
Và bây giờ khi di chuột, khối sẽ xoay so với
góc dưới bên phải. Để làm điều này cần đặt
điểm biến đổi cách 100% sang phải
và cách 100% xuống dưới (có thể đặt
bằng px, nhưng khi thay đổi kích thước phần tử
điểm biến đổi sẽ ở nguyên vị trí,
vì vậy tốt hơn là dùng %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Ví dụ
Xoay khối so với góc trên bên phải:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Ví dụ
Xoay khối so với trung tâm cạnh trái.
Để làm điều này, cho trục X đặt left (điểm
xoay sẽ ở bên trái), còn cho trục Y - center
(điểm xoay sẽ ở trung tâm theo chiều dọc):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Ví dụ
Thuộc tính có thể được đặt không chỉ cho phép xoay,
mà còn cho các phép biến đổi khác. Hãy tăng
tỉ lệ phóng to bằng scale, chỉ định điểm
biến đổi là góc dưới bên trái:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Ví dụ
Và bây giờ chỉ định điểm biến đổi là góc trên bên phải:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Ví dụ
Điểm biến đổi cũng có thể được đặt ở bên ngoài phần tử. Trong ví dụ sau, khi di chuột lên khối màu đỏ, khối màu đen sẽ thực hiện phép xoay so với điểm nằm bên ngoài:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
