HTML DOM의 style.transform 속성은 HTML 문서 내 특정 요소에 2D 또는 3D 변환(transformation)을 적용하는 데 사용됩니다. 이 속성을 활용하면 요소를 이동시키거나, 회전하고, 크기를 조절하며, 기울이는 등 다양한 시각적 효과를 JavaScript로 동적으로 구현할 수 있습니다.
문법(Syntax)
transform 속성의 기본 문법은 다음과 같습니다.
transform 값 반환
object.style.transform
transform 값 설정
object.style.transform = "value"
속성 값
value 자리에는 아래 표의 값 중 하나를 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| initial | 이 속성 값을 기본(default) 값으로 설정합니다. |
| none | 변환을 적용하지 않습니다. |
| transform-function | 유효한 2D 또는 3D 변환 함수를 지정합니다. |
변환 함수(Functions)
transform-function으로 지정할 수 있는 유효한 2D 및 3D 변환 함수는 다음과 같습니다.
| 함수 | 설명 |
|---|---|
| matrix(n,n,n,n,n,n) | 6개의 값으로 이루어진 행렬을 사용해 2D 변환을 지정합니다. |
| matrix3d(n,n,n,n,...) | 16개의 값으로 이루어진 행렬을 사용해 3D 변환을 지정합니다. |
| translate(x,y) | 2D 이동(translation)을 지정합니다. |
| translate3d(x,y,z) | 3D 이동을 지정합니다. |
| translateX(x) | X축 값만 사용하여 이동을 지정합니다. |
| translateY(y) | Y축 값만 사용하여 이동을 지정합니다. |
| translateZ(z) | Z축 값만 사용하여 이동을 지정합니다. |
| scale(x,y) | 2D 크기 조절(scale)을 지정합니다. |
| scale3d(x,y,z) | 3D 크기 조절을 지정합니다. |
| scaleX(x) | X축 값만 사용하여 크기를 조절합니다. |
| scaleY(y) | Y축 값만 사용하여 크기를 조절합니다. |
| scaleZ(z) | Z축 값만 사용하여 크기를 조절합니다. |
| rotate(angle) | 2D 회전(rotate)을 지정합니다. |
| rotate3d(x,y,z) | 3D 회전을 지정합니다. |
| rotateX(x) | X축 값만 사용하여 회전을 지정합니다. |
| rotateY(y) | Y축 값만 사용하여 회전을 지정합니다. |
| rotateZ(z) | Z축 값만 사용하여 회전을 지정합니다. |
| skew(x,y) | 2D 기울임(skew)을 지정합니다. |
| skewX(x) | X축 값만 사용하여 기울임을 지정합니다. |
| skewY(y) | Y축 값만 사용하여 기울임을 지정합니다. |
| perspective(n) | 3D 변환에 원근감(perspective)을 지정합니다. |
예제
다음은 HTML DOM style transform 속성을 실제로 사용하는 예제입니다.
<!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 transform Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Set transform</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
[Set transform] 버튼을 클릭하면 빨간색 박스에 translate(10px,10px) rotate(10deg)로 지정된 2D 변환이 즉시 적용되어, 요소가 오른쪽 아래로 이동하면서 10도 회전하는 것을 확인할 수 있습니다.
