Hướng dẫn rotate trong css

• 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:

transform

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

• Trang chủ
• Tham khảo
• CSS
• CSS3
• 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:

Ví dụ

HTML viết:

transform

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: