Hàm rotateX
Hàm rotateX thiết lập phép xoay quanh
trục X 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 đo bằng bất kỳ đơn vị góc nào.
Giá trị dương xoay về phía chúng ta, giá trị âm xoay ra xa chúng ta.
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: rotateX(góc);
}
Ví dụ
Trong ví dụ này, khối sẽ xoay
180 độ quanh trục X khi di chuột qua.
Để có 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: rotateX(180deg);
}
:
Ví dụ
Thay đổi trục quay bằ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: rotateX(180deg);
}
:
Ví dụ
Thiết lập một góc âm:
<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: rotateX(-180deg);
}
:
