CSS에서 변환(transform)된 요소의 위치를 변경하려면 transform-origin 속성을 사용합니다. 이 속성은 요소에 회전, 확대·축소 등의 변환 효과를 적용할 때 기준이 되는 원점(origin)을 지정하는 역할을 합니다.
transform-origin 속성은 기본적으로 요소의 중앙(50% 50%)을 원점으로 설정하지만, 백분율(%), 픽셀(px) 값 또는 top, left 같은 키워드를 조합하여 원점의 위치를 자유롭게 조정할 수 있습니다. 아래 예제에서는 파란색 요소에 10도 회전을 적용하고, 원점을 가로 30%, 세로 40% 지점으로 설정했습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(10deg);
transform-origin: 30% 40%;
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class = "demo1">Demo
<div class = "demo2">Demo
<div class = "demo3">
Demo
</div>
</div>
</div>
</body>
</html>위 코드를 실행하면 노란색과 주황색 배경 위에 파란색 요소가 나타나며, transform-origin 속성 덕분에 일반적인 중앙 회전이 아닌 지정된 지점을 기준으로 회전하는 결과를 직접 확인할 수 있습니다.