- 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()
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();
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(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);
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ó. |