Hướng dẫn auto rotate image css - tự động xoay hình ảnh 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ố.

Nội dung chính Show

Thuộc tính transform với giá trị rotate()
Giá trị rotate();
transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg);

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

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); -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(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg);	transform: rotate(225deg); -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg);	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);	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ó.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

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