Hàm rotate
Hàm rotate() thiết lập phép xoay phần tử
theo một góc xác định. Được sử dụng kết hợp
với thuộc tính transform.
Giá trị của thuộc tính là góc đo bằng bất kỳ đơn vị góc nào.
Giá trị dương xoay theo chiều kim đồng hồ, giá trị âm - ngược chiều kim đồng hồ.
Phép xoay được thực hiện xung quanh điểm, được xác định bởi
thuộc tính transform-origin.
Cú pháp
bộ chọn {
transform: rotate(góc);
}
Ví dụ
Trong ví dụ này khối được xoay 30
độ theo chiều kim đồng hồ:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ví dụ
Trong ví dụ này khối được xoay 30
độ ngược chiều kim đồng hồ:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ví dụ
Trong ví dụ này, khi di chuột qua, khối sẽ xoay
1 vòng, vì giá trị xoay
được đặt là 1turn (có thể đạt hiệu ứng tương tự
nếu đặt góc xoay là 360deg). Để
phép xoay được 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: rotate(1turn);
}
:
