Thuộc tính 3D Transforms

Sử dụng 3D Transform trong CSS, bạn có thể di chuyển các phần tử theo 3 trục: x, y và z.

Dưới đây là các ví dụ xác định một cách rõ ràng cách phần tử sẽ quay theo các trục.

Giá trị	Giải thích
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Để tịnh tiến phần tử bởi sử dụng 16 giá trị của một ma trận
translate3d(x,y,z)	Để tịnh tiến phần tử theo trục x, trục y và trục z
translateX(x)	Để tịnh tiến phần tử theo trục x
translateY(y)	Để tịnh tiến phần tử theo trục y
translateZ(z)	Để tịnh tiến phần tử theo trục z
scaleX(x)	Để Scale Transform theo trục x
scaleY(y)	Để Scale Transform theo trục y
scaleY(y)	Để Scale Transform theo trục z
rotateX(angle)	Để Rotate Transform theo trục x
rotateY(angle)	Để Rotate Transform theo trục y
rotateZ(angle)	Để Rotate Transform theo trục z

Trình duyệt hỗ trợ

Thuộc tính	Chrome	IE	Firefox	Opera	Safari
transform	36.012.0 -webkit-	10.0	16.0 10.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-origin (three-value syntax)	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-style	36.012.0 -webkit-	11.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective-origin	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-

1. Phương thức 3D rotateX () (xoay trục X)
Phương thức 3D CSS rotateX () được sử dụng để xoay một phần tử xung quanh trục X theo mức độ nhất định.

Ví dụ:

<style>  
div {  
    width: 300px;  
    height: 100px;  
    background-color: lightpink;  
    border: 1px solid black;  
}  
div#myDiv {  
    -webkit-transform: rotateX(150deg); /* Safari */  
    transform: rotateX(150deg); /* Standard syntax */  
}  
</style>

Xem ví dụ

2. Phương thức 3D rotateY()  (xoay trục Y)
Phương thức 3D rotateY () được sử dụng để xoay một phần tử xung quanh trục Y theo góc cho trước.

Ví dụ:

<style>  
div {  
    width: 300px;  
    height: 100px;  
    background-color:lightpink;  
    border: 1px solid black;  
}  
  
div#myDiv {  
    -webkit-transform: rotateY(150deg); /* Safari */  
    transform: rotateY(150deg); /* Standard syntax */  
}  
</style>  

Xem ví dụ

3. Phương thức 3D rotateZ () (quay trục Z)
Phương thức 3D rotateZ () được sử dụng để xoay một phần tử xung quanh trục Z theo một góc cho trước.

Ví dụ:

<style>  
div {  
    width: 300px;  
    height: 100px;  
    background-color: yellow;  
    border: 1px solid black;  
}  
div#myDiv {  
    -webkit-transform: rotateZ(90deg); /* Safari */  
    transform: rotateZ(90deg); /* Standard syntax */  
}  
</style>  

Xem ví dụ