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():

transform

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()

transform

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);

transform
rotate(Số-dương) transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);

transform
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);

transform
transform: rotate(135deg);
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);

transform
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);

transform
transform: rotate(225deg);
-moz-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);

transform
transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);

transform
transform: rotate(315deg);
-moz-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
-o-transform: rotate(315deg);
-ms-transform: rotate(315deg);

transform
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);

transform
rotate(Số-âm) transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);

transform
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);

transform
transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);

transform
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);

transform
transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
-webkit-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);

transform
transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-webkit-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);

transform
transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
-webkit-transform: rotate(-315deg);
-o-transform: rotate(-315deg);
-ms-transform: rotate(-315deg);

transform
transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);

transform