Thuộc tính chuyển đổi CSS
Ví dụ
Xoay, nghiêng và chia tỷ lệ ba phần tử <div> khác nhau:
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính transform
áp dụng chuyển đổi 2D hoặc 3D cho một phần tử. Thuộc tính này cho phép bạn xoay, chia tỷ lệ, di chuyển, nghiêng, v.v., các phần tử.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.transform="rotate(7deg)" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Cú pháp
transform: none| transform-functions |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | Defines that there should be no transformation | Demo ❯ |
matrix( n,n,n,n,n,n ) | Defines a 2D transformation, using a matrix of six values | Demo ❯ |
matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) |
Defines a 3D transformation, using a 4x4 matrix of 16 values | |
translate( x,y ) | Defines a 2D translation | Demo ❯ |
translate3d( x,y,z ) | Defines a 3D translation | |
translateX( x ) | Defines a translation, using only the value for the X-axis | |
translateY( y ) | Defines a translation, using only the value for the Y-axis | |
translateZ( z ) | Defines a 3D translation, using only the value for the Z-axis | |
scale( x,y ) | Defines a 2D scale transformation | Demo ❯ |
scale3d( x,y,z ) | Defines a 3D scale transformation | |
scaleX( x ) | Defines a scale transformation by giving a value for the X-axis | |
scaleY( y ) | Defines a scale transformation by giving a value for the Y-axis | |
scaleZ( z ) | Defines a 3D scale transformation by giving a value for the Z-axis | |
rotate( angle ) | Defines a 2D rotation, the angle is specified in the parameter | Demo ❯ |
rotate3d( x,y,z,angle ) | Defines a 3D rotation | |
rotateX( angle ) | Defines a 3D rotation along the X-axis | Demo ❯ |
rotateY( angle ) | Defines a 3D rotation along the Y-axis | Demo ❯ |
rotateZ( angle ) | Defines a 3D rotation along the Z-axis | |
skew( x-angle,y-angle ) | Defines a 2D skew transformation along the X- and the Y-axis | Demo ❯ |
skewX( angle ) | Defines a 2D skew transformation along the X-axis | Demo ❯ |
skewY( angle ) | Defines a 2D skew transformation along the Y-axis | Demo ❯ |
perspective( n ) | Defines a perspective view for a 3D transformed element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Hình ảnh ném lên bàn
Ví dụ này trình bày cách tạo ảnh "Polaroid" và xoay ảnh.
Trang liên quan
Hướng dẫn CSS: Biến đổi CSS 2D
Hướng dẫn CSS: Chuyển đổi CSS 3D
Tham chiếu DOM HTML: thuộc tính biến đổi