JavaScript에서 transformOrigin 속성을 사용하면 변환(transform)이 적용된 요소의 위치, 즉 변환의 기준점을 자유롭게 변경할 수 있습니다.
transformOrigin 속성이란?
transformOrigin은 요소가 회전(rotate), 확대·축소(scale) 등의 변환을 수행할 때 기준이 되는 지점을 지정하는 속성입니다. 기본값은 요소의 중심인 '50% 50%'이며, 이 값을 조정하면 요소가 어느 지점을 중심으로 변환되는지 제어할 수 있습니다.
또한 3D 변환 시 원근감(perspective)의 기준점을 바꾸고 싶다면 perspectiveOrigin 속성을 함께 사용하면 됩니다.
예제
아래 예제 코드를 실행해 보세요. 버튼을 클릭하면 div 요소들의 원근 원점(perspective origin)과 변환 원점(transform origin) 위치가 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 200px;
width: 200px;
padding: 20px;
border: 2px solid blue;
perspective: 100px;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateX(45deg);
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid BLUE;
background-color: green;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<p>Change the property of div</p>
<button onclick = "display()"> Set Perspective Origin Position </button>
<div id = "div1"> DIV1
<div id = "div2">DIV2</div>
<div id = "div3">DIV3 </div>
</div>
<script>
function display() {
document.getElementById("div1").style.perspectiveOrigin = "20px 10%";
document.getElementById("div2").style.transformOrigin = "0 0";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 display() 함수가 실행되어 다음 두 가지 작업이 수행됩니다.
1. perspectiveOrigin 변경: 부모 요소인 div1의 원근 원점을 '20px 10%'로 설정하여 3D 공간에서 관찰자의 시점 위치를 조정합니다.
2. transformOrigin 변경: 자식 요소인 div2의 변환 원점을 '0 0'(왼쪽 상단 모서리)으로 설정합니다. 그 결과 rotateX(45deg) 회전이 요소의 중심이 아닌 왼쪽 위를 기준으로 적용되어 회전 결과물이 달라지는 것을 확인할 수 있습니다.
이처럼 transformOrigin 속성을 활용하면 변환 애니메이션의 방향과 느낌을 세밀하게 제어할 수 있어, 카드 뒤집기 효과나 3D 메뉴 등 다양한 UI 구현에 유용합니다.