- Trang chủ
- Tham khảo
- CSS
- CSS3
- Ví dụ về thuộc tính transform: rotate()
Thuộc tính transform với giá trị rotate: Định nghĩa một phép quay 2D với góc được xác định bởi tham số. HTML viết:<html>
<head></head>
<body>
<p>transform</p>
</body>
</html> CSS viết:p {
background: #cc0000;
height: 50px;
margin: 0 auto;
width: 120px;
} Hiển thị trình duyệt khi chưa có transform: rotate():Thêm thuộc tính transform: rotate(), CSS viết: p {
background: #cc0000;
height: 50px;
margin: 0 auto;
width: 120px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
} Hiển thị trình duyệt khi có transform: rotate()Giá trị rotate();
Giá trị | Ví dụ | Hiển thị |
---|
Bình thường | transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);
| transform
| rotate(Số-dương) | transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg);
| transform
| rotate(Số-dương) | transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); -o-transform: rotate(-225deg); -ms-transform: rotate(-225deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); -o-transform: rotate(-270deg); -ms-transform: rotate(-270deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-315deg); -webkit-transform: rotate(-315deg); -o-transform: rotate(-315deg); -ms-transform: rotate(-315deg);
| transform
| rotate(Số-dương) -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg);
| transform
|
- Trang chủ
- Tham khảo
- CSS
- CSS3
- rotate(Số-dương)
transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);
transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); | transform: rotate(225deg); -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); | transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); | transform: rotate(315deg); -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); |
---|
transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); | rotate(Số-âm) |
| transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); | transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); | transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
| transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); | perspective(n)
| transform: rotate(-225deg); -moz-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); -o-transform: rotate(-225deg); -ms-transform: rotate(-225deg); | transform: rotate(-270deg); -moz-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); -o-transform: rotate(-270deg); -ms-transform: rotate(-270deg); | transform: rotate(-315deg); -moz-transform: rotate(-315deg); -webkit-transform: rotate(-315deg); -o-transform: rotate(-315deg); -ms-transform: rotate(-315deg); | transform: rotate(-360deg); -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); | Thuộc tính transform | Định nghĩa và sử dụng | Thuộc tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ... | Thuộc tính của transform trong css3: | Thuộc tính | giá trị | Trình duyệt | Mô tả | transform | none | Xác định rằng không có chuyển đổi | matrix(n,n,n,n,n,n) | Định nghĩa một biến đổi 2D, bằng cách sử dụng một ma trận với 6 giá trị | Định nghĩa một biến đổi 3D, bằng cách sử dụng một ma trận 4x4 với 16 giá trị | Định nghĩa một biến đổi 3D dưới dạng phối cảnh. | rotate(góc) | Định nghĩa một phép quay 2D với góc được xác định bởi tham số. | rotate3d(x,y,z,angle) | Định nghĩa một phép quay 3D được xác định bởi các tham số. | skewX(angle) | Xác định sự biến đổi nghiêng 2D dọc theo trục X. | skewY(angle) | Xác định sự biến đổi nghiêng 2D dọc theo trục Y. | translate(x,y) | Xác định một dịch chuyển 2D. | translate3d(x,y,z) | Xác định một dịch chuyển 3D. | translateX(x) | Xác định một dịch chuyển 2D theo trục X. | translateY(y) | Xác định một dịch chuyển 2D theo trục Y. | translateZ(z) | Xác định một dịch chuyển 2D theo trục Z. | transform-origin | Giá trị trục X |
| Xác định nơi nhìn thấy được đặt tại trục X, giá trị có thể: left, right, center, chiều dài, %. | Giá trị trục Y | Xác định nơi nhìn thấy được đặt tại trục Y, giá trị có thể: left, right, center, chiều dài, %. | Giá trị trục Z | Xác định nơi nhìn thấy được đặt tại trục Z, giá trị có thể: chiều dài. | transform-style | preserve-3d |
| Các thành phần bên trong sẽ giữ vị trí 3D của nó. | flat | Các thành phần bên trong sẽ không giữ vị trí 3D của nó. |
Ví dụHTML viết:<html>
<head></head>
<body>
<p>transform</p>
</body>
</html> CSS viết:p {
background: #cc0000;
height: 50px;
width: 80px;
} Hiển thị trình duyệt khi chưa có transform:Thêm thuộc tính transform vào CSS:p {
background: #cc0000;
height: 50px;
width: 80px;
transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
} Hiển thị trình duyệt khi có transform:
|