Thuộc tính transform với giá trị rotateZ()
Thuộc tính transform với giá trị rotateZ: Định nghĩa một phép quay 3D dọc theo trục Z.
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: rotateZ():
transform
Thêm thuộc tính transform: rotateZ(), CSS viết:
p {
background: #cc0000;
height: 50px;
margin: 0 auto;
width: 120px;
transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
}
Hiển thị trình duyệt khi có transform: rotateZ()
transform
Giá trị rotateZ();
| Giá trị | Ví dụ | Hiển thị |
|---|---|---|
| Bình thường | transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); |
transform |
| rotateZ(Số-dương) | transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); |
transform |
| transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); |
transform |
|
| transform: rotateZ(135deg); -moz-transform: rotateZ(135deg); -webkit-transform: rotateZ(135deg); -o-transform: rotateZ(135deg); -ms-transform: rotateZ(135deg); |
transform |
|
| transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); |
transform |
|
| transform: rotateZ(225deg); -moz-transform: rotateZ(225deg); -webkit-transform: rotateZ(225deg); -o-transform: rotateZ(225deg); -ms-transform: rotateZ(225deg); |
transform |
|
| transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); |
transform |
|
| transform: rotateZ(315deg); -moz-transform: rotateZ(315deg); -webkit-transform: rotateZ(315deg); -o-transform: rotateZ(315deg); -ms-transform: rotateZ(315deg); |
transform |
|
| transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); |
transform |
|
| rotateZ(Số-âm) | transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); |
transform |
| transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -webkit-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); |
transform |
|
| transform: rotateZ(-135deg); -moz-transform: rotateZ(-135deg); -webkit-transform: rotateZ(-135deg); -o-transform: rotateZ(-135deg); -ms-transform: rotateZ(-135deg); |
transform |
|
| transform: rotateZ(-180deg); -moz-transform: rotateZ(-180deg); -webkit-transform: rotateZ(-180deg); -o-transform: rotateZ(-180deg); -ms-transform: rotateZ(-180deg); |
transform |
|
| transform: rotateZ(-225deg); -moz-transform: rotateZ(-225deg); -webkit-transform: rotateZ(-225deg); -o-transform: rotateZ(-225deg); -ms-transform: rotateZ(-225deg); |
transform |
|
| transform: rotateZ(-270deg); -moz-transform: rotateZ(-270deg); -webkit-transform: rotateZ(-270deg); -o-transform: rotateZ(-270deg); -ms-transform: rotateZ(-270deg); |
transform |
|
| transform: rotateZ(-315deg); -moz-transform: rotateZ(-315deg); -webkit-transform: rotateZ(-315deg); -o-transform: rotateZ(-315deg); -ms-transform: rotateZ(-315deg); |
transform |
|
| transform: rotateZ(-360deg); -moz-transform: rotateZ(-360deg); -webkit-transform: rotateZ(-360deg); -o-transform: rotateZ(-360deg); -ms-transform: rotateZ(-360deg); |
transform |