rotateY()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Hàm rotateY() CSS function định nghĩa một phép biến đổi xoay một phần tử quanh
trục y (dọc) mà không làm biến dạng nó. Kết quả của nó là kiểu dữ liệu <transform-function>.
Try it
transform: rotateY(0);
transform: rotateY(45deg);
transform: rotateY(-0.2turn);
transform: rotateY(3.142rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Trục quay đi qua một gốc tọa độ, được xác định bởi thuộc tính CSS transform-origin.
Note:
rotateY(a) tương đương với
rotate3d(0, 1, 0, a).
Note: Không giống như phép quay trên mặt phẳng 2D, phép hợp thành của các phép quay 3D thường không có tính giao hoán. Nói cách khác, thứ tự áp dụng các phép quay ảnh hưởng đến kết quả.
Cú pháp
rotateY(a)
Giá trị
a-
Là một
<angle>biểu thị góc quay. Góc dương biểu thị xoay theo chiều kim đồng hồ, góc âm biểu thị xoay ngược chiều kim đồng hồ.
| Tọa độ Descartes trên ℝ^2 | Tọa độ thuần nhất trên ℝℙ^2 | Tọa độ Descartes trên ℝ^3 | Tọa độ thuần nhất trên ℝℙ^3 |
|---|---|---|---|
| Phép biến đổi này áp dụng cho không gian 3D và không thể biểu diễn trên mặt phẳng. |
|
|
|
Cú pháp chính thức
<rotateY()> =
rotateY( [ <angle> | <zero> ] )
Ví dụ
HTML
<div>Bình thường</div>
<div class="rotated">Đã xoay</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateY(60deg);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-rotatey |
Khả năng tương thích trình duyệt
Xem thêm
- Thuộc tính
transform - Thuộc tính
rotate <transform-function>