HTML DOM의 transformOrigin 속성은 HTML 문서 내 요소에 적용된 2D 또는 3D 변환(transform)의 기준점(원점)을 가져오거나 설정하는 데 사용됩니다.
CSS 변환은 기본적으로 요소의 중심을 기준으로 실행됩니다. 하지만 transformOrigin 속성을 활용하면 회전, 확대·축소, 이동 등의 변환이 시작되는 지점을 x축, y축, z축 방향으로 자유롭게 조절할 수 있어, 보다 다채로운 애니메이션 효과를 구현할 수 있습니다.
문법(Syntax)
transformOrigin 속성의 기본 문법은 다음과 같습니다.
현재 transformOrigin 값 반환
object.style.transformOrigin
transformOrigin 값 변경
object.style.transformOrigin = "value"
속성값
value 자리에는 아래 표의 값을 사용할 수 있습니다.
| 값 | 설명 |
|---|---|
| x-axis y-axis z-axis | 변환 원점이 각각 x축, y축, z축상에서 위치할 지점을 설정합니다. |
| initial | 이 속성값을 기본(default) 값으로 초기화합니다. |
| inherit | 부모 요소로부터 이 속성값을 상속받습니다. |
예제
다음 예제를 통해 HTML DOM style transformOrigin 속성의 실제 동작을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
.box {
background: lightcoral;
width: 200px;
height: 200px;
margin: 2rem auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
</head>
<body>
<h1>DOM Style transformOrigin Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Change transformOrigin</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
document.querySelector('.box').style.transformOrigin = "0 0";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “Change transformOrigin” 버튼을 클릭하면, 빨간색 박스의 변환 기준점이 좌측 상단("0 0")으로 변경됩니다. 그 결과 translate(이동)와 rotate(회전)가 중심이 아닌 왼쪽 위 꼭짓점을 기준으로 적용되어 박스의 움직임이 달라지는 것을 확인할 수 있습니다.
