Ví dụ về thuộc tính transform-origin

Thuộc tính transform-origin

Thuộc tính transform-origin: Xác định lại chiều rộng và chiều cao cho thành phần.

HTML viết:

<html>
<head></head>
<body>
<div class="originWrap">
<div class="origin">transform origin</div>
</div>
</body>
</html>

CSS viết:

div.originWrap {
	border: 1px solid #0000cc;
	height: 200px;
	width: 200px;
}

div.origin {
    background: #cc0000;
    height: 100px;
    width: 100px;
    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 chưa có transform-origin:

transform origin

Thêm thuộc tính transform-origin, CSS viết:

div.originWrap {
	border: 1px solid #0000cc;
	height: 200px;
	width: 200px;
}

div.origin {
    background: #cc0000;
    height: 100px;
    width: 100px;
    transform: rotate(45deg);
    transform-origin: left center;
    -moz-transform: rotate(45deg);
    -moz-transform-origin: left center;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: left center;
    -o-transform: rotate(45deg);
    -o-transform-origin: left center;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: left center;
}

Hiển thị trình duyệt khi có transform-origin:

transform origin

Giá trị rotateX();

Giá trị Ví dụ Hiển thị
Bình thường transform-origin: center center;
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform
left Y transform-origin: left top;
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform
transform-origin: left center;
-moz-transform-origin: left center;
-webkit-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform
transform-origin: left bottom;
-moz-transform-origin: left bottom;
-webkit-transform-origin: left bottom;
-o-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform
center Y transform-origin: center top;
-moz-transform-origin: center top;
-webkit-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform
transform-origin: center center;
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform
transform-origin: center bottom;
-moz-transform-origin: center bottom;
-webkit-transform-origin: center bottom;
-o-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform
right Y transform-origin: right top;
-moz-transform-origin: right top;
-webkit-transform-origin: right top;
-o-transform-origin: right top;
-ms-transform-origin: right top;
transform
transform-origin: right center;
-moz-transform-origin: right center;
-webkit-transform-origin: right center;
-o-transform-origin: right center;
-ms-transform-origin: right center;
transform
transform-origin: right bottom;
-moz-transform-origin: right bottom;
-webkit-transform-origin: right bottom;
-o-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform
X top transform-origin: left top;
-moz-transform-origin: left top;
-webkit-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform
transform-origin: center top;
-moz-transform-origin: center top;
-webkit-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform
transform-origin: right top;
-moz-transform-origin: right top;
-webkit-transform-origin: right top;
-o-transform-origin: right top;
-ms-transform-origin: right top;
transform
X center transform-origin: left center;
-moz-transform-origin: left center;
-webkit-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform
transform-origin: center center;
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform
transform-origin: right center;
-moz-transform-origin: right center;
-webkit-transform-origin: right center;
-o-transform-origin: right center;
-ms-transform-origin: right center;
transform
X bottom transform-origin: left bottom;
-moz-transform-origin: left bottom;
-webkit-transform-origin: left bottom;
-o-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform
transform-origin: center bottom;
-moz-transform-origin: center bottom;
-webkit-transform-origin: center bottom;
-o-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform
transform-origin: right bottom;
-moz-transform-origin: right bottom;
-webkit-transform-origin: right bottom;
-o-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform
0% Y transform-origin: 0% -30%;
-moz-transform-origin: 0% -30%;
-webkit-transform-origin: 0% -30%;
-o-transform-origin: 0% -30%;
-ms-transform-origin: 0% -30%;
transform
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform
transform-origin: 0% 30%;
-moz-transform-origin: 0% 30%;
-webkit-transform-origin: 0% 30%;
-o-transform-origin: 0% 30%;
-ms-transform-origin: 0% 30%;
transform
X 0% transform-origin: -30% 0%;
-moz-transform-origin: -30% 0%;
-webkit-transform-origin: -30% 0%;
-o-transform-origin: -30% 0%;
-ms-transform-origin: -30% 0%;
transform
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform
transform-origin: 30% 0%;
-moz-transform-origin: 30% 0%;
-webkit-transform-origin: 30% 0%;
-o-transform-origin: 30% 0%;
-ms-transform-origin: 30% 0%;
transform
X Y transform-origin: -30% -30%;
-moz-transform-origin: -30% -30%;
-webkit-transform-origin: -30% -30%;
-o-transform-origin: -30% -30%;
-ms-transform-origin: -30% -30%;
transform
transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform
transform-origin: 30% 30%;
-moz-transform-origin: 30% 30%;
-webkit-transform-origin: 30% 30%;
-o-transform-origin: 30% 30%;
-ms-transform-origin: 30% 30%;
transform