Ví Dụ Về Thuộc Tính Transform: Rotate() - Học Web Chuẩn

Trang chủ » Xoay 90 độ Css » Ví Dụ Về Thuộc Tính Transform: Rotate() - Học Web Chuẩn

Có thể bạn quan tâm

Ví dụ về thuộc tính transform: rotate()
  • 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():

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

Ví dụ thuộc tính transform

  • transform: rotate();

Từ khóa » Xoay 90 độ Css