Hàm rotate3d

Hàm rotate3d thiết lập phép xoay phần tử một góc nhất định đồng thời quanh trục X, Y, 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.

Hàm nhận 4 tham số làm giá trị, được viết cách nhau bằng dấu phẩy. Ba tham số đầu tiên xác định một vector trục trong không gian ba chiều, so với trục này thì phần tử sẽ được xoay. Tham số thứ tư thiết lập góc xoay.

Cú pháp

cssbộ chọn {
  transform: rotate3d(X, Y, Z, góc);
}

Ví dụ

Trong ví dụ này, vector trục sẽ hướng về góc trên bên phải của màn hình:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Xem thêm