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.

Các phương thức của 3D Transform trong CSS

Bảng dưới liệt kê các phương thức được sử dụng để gọi 3D Transform trong CSS:

Giá trịMiêu tả
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)Được sử dụng để 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)Được sử dụng để tịnh tiến phần tử theo trục x, trục y và trục z
translateX(x)Được sử dụng để tịnh tiến phần tử theo trục x
translateY(y)Được sử dụng để tịnh tiến phần tử theo trục y
translateZ(z)Được sử dụng để tịnh tiến phần tử theo trục z
scaleX(x)Được sử dụng để Scale Transform theo trục x
scaleY(y)Được sử dụng để Scale Transform theo trục y
scaleY(y)Được sử dụng để Scale Transform theo trục z
rotateX(angle)Được sử dụng để Rotate Transform theo trục x
rotateY(angle)Được sử dụng để Rotate Transform theo trục y
rotateZ(angle)Được sử dụng để Rotate Transform theo trục z
3D Transform theo trục x trong CSS ---------------------------------- Ví dụ dưới đây minh họa cách sử dụng của 3D Transform theo trục x trong CSS: ```
3D Transform trong CSS3

Rotate theo truc X

3D Transform trong CSS3.
```Kết quả là: 3D Transform theo trục y trong CSS ---------------------------------- Ví dụ dưới đây minh họa cách sử dụng của 3D Transform theo trục y trong CSS: ```
3D Transform trong CSS3

Rotate theo truc Y

3D Transform trong CSS3.
```Kết quả là: 3D Transform theo trục z trong CSS ---------------------------------- Ví dụ dưới đây minh họa cách sử dụng của 3D Transform theo trục z trong CSS: ```
3D Transform trong CSS3

Rotate theo truc Z

3D Transform trong CSS3
```Kết quả là: Loạt bài hướng dẫn **Học CSS cơ bản và nâng cao** của chúng tôi dựa trên nguồn tài liệu của: [Tutorialspoint](http://www.tutorialspoint.com/index.htm) và [W3Schools](http://www.w3schools.com/css/)

Viết câu trả lời

Drop Images

0 Bình luận