Hàm rotateY
Hàm rotateY xác định phép xoay quanh
trục Y 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 về phía chúng ta, giá trị âm - xoay ra xa chúng ta. Phép xoay được thực hiện
quanh một điểm, được xác định bởi thuộc tính transform-origin.
Cú pháp
bộ chọn {
transform: rotateY(góc);
}
Ví dụ
Trong ví dụ này, khi di chuột qua, khối sẽ xoay
180 độ quanh trục Y. Để 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: rotateY(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: right center;
}
#elem:hover {
transform: rotateY(180deg);
}
:
