Thuộc tính transform-origin trong CSS dùng để chỉ định gốc của phép xoay. Đó là điểm mà một phần tử sẽ xoay quanh. Nó được dùng cho cả phép xoay 2D lẫn 3D.
Cú pháp:
transform-origin: position | initial | inherit
Giá trị thuộc tính:
- position: Giá trị này chỉ định vị trí gốc xoay. Nó nhận 3 giá trị tương ứng khoảng cách từ cạnh trái. Khoảng cách từ cạnh trên và trục z của phép xoay. Các giá trị có thể dùng đơn vị độ dài, phần trăm hoặc từ khóa. Giá trị trục z luôn được chỉ định bằng đơn vị độ dài.
- initial: Giá trị này đặt thuộc tính về giá trị mặc định của nó.
- inherit: Giá trị này dùng để kế thừa thuộc tính từ phần tử cha.
Ví dụ 1: Chỉ định vị trí bằng đơn vị độ dài.
html<!DOCTYPE html>
<html>
<head>
<style>
.outer {
margin: 50px;
border: 1px dotted;
position: relative;
height: 100px;
width: 400px;
background-color: lightgreen;
}
.box {
position: absolute;
border: 1px solid;
background: url(
"https://write.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png") no-repeat;
background-size: cover;
height: 100px;
width: 400px;
transform: rotate(15deg);
transform-origin: 10px 30px;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property is used to set
the origin of the element's transformation
</p>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
Đầu ra: 
Ví dụ 2: Chỉ định vị trí bằng phần trăm.
html<!DOCTYPE html>
<html>
<head>
<style>
.outer {
margin: 50px;
border: 1px dotted;
position: relative;
height: 100px;
width: 400px;
background-color: lightgreen;
}
.box {
position: absolute;
border: 1px solid;
background: url(
"https://write.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png") no-repeat;
background-size: cover;
height: 100px;
width: 400px;
transform: rotate(15deg);
transform-origin: 50% 75%;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property is
used to set the origin of the element's
transformation
</p>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
Đầu ra:
Ví dụ 3: Chỉ định vị trí bằng từ khóa.
html<!DOCTYPE html>
<html>
<head>
<style>
.outer {
margin: 50px;
border: 1px dotted;
position: relative;
height: 100px;
width: 400px;
background-color: lightgreen;
}
.box {
position: absolute;
border: 1px solid;
background: url(
"https://write.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png") no-repeat;
background-size: cover;
height: 100px;
width: 400px;
transform: rotate(15deg);
transform-origin: bottom left;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property is
used to set the origin of the element's
transformation
</p>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
Đầu ra: 
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính transform-origin: initial.
html<!DOCTYPE html>
<html>
<head>
<style>
.outer {
margin: 50px;
border: 1px dotted;
position: relative;
height: 100px;
width: 400px;
background-color: lightgreen;
}
.box {
position: absolute;
border: 1px solid;
background: url(
"https://write.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
) no-repeat;
background-size: cover;
height: 100px;
width: 400px;
transform: rotate(15deg);
transform-origin: initial;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property is
used to set the origin of the element's
transformation
</p>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
Đầu ra: 
Ví dụ: Trong ví dụ này, chúng ta sử dụng thuộc tính transform-origin: inherit.
html<!DOCTYPE html>
<html>
<head>
<style>
/* this acts as the parent */
.outer {
margin: 50px;
border: 1px dotted;
position: relative;
height: 100px;
width: 400px;
background-color: lightgreen;
/* set the property of the parent */
transform-origin: bottom left;
}
.box {
position: absolute;
border: 1px solid;
background: url(
"https://write.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
) no-repeat;
background-size: cover;
height: 100px;
width: 400px;
transform: rotate(15deg);
/* inherits the property of the parent */
transform-origin: inherit;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property is used to set
the origin of the element's transformation
</p>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
Đầu ra: 
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính transform-origin được liệt kê bên dưới:
- Chrome 36.0
- Edge 12.0
- Firefox 16.0
- Safari 9.0
- Opera 23.0