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

cssbộ 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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

Xem thêm