Hàm rotateZ
Hàm rotateZ xác định phép xoay quanh
trục Z trong không gian ba chiều. Được sử dụng
cùng với thuộc tính transform.
Giá trị của thuộc tính là một góc trong bất kỳ đơn vị đo góc nào.
Giá trị dương xoay theo chiều kim đồng hồ,
giá trị âm - xoay ngược chiều kim đồng hồ.
Phép xoay được thực hiện quanh điểm, được xác định bởi
thuộc tính transform-origin.
Cú pháp
bộ chọn {
transform: rotateZ(góc);
}
Ví dụ
Trong ví dụ này, khối sẽ xoay
180 độ quanh trục Z khi di chuột qua.
Để tạo hiệu ứng xoay mượt mà, thuộc tính
transition đã được thêm vào:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
Ví dụ
Hãy thay đổi trục quay bằng cách sử dụng thuộc tính
transform-origin:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
:
