JavaScript로 요소에 2D·3D 변환 적용하기
JavaScript에서 transform 속성을 사용하면 요소에 2D 또는 3D 변환을 손쉽게 적용할 수 있습니다. 예를 들어 요소를 60도 회전시키고 싶다면 transform 값으로 rotate(60deg)를 설정하면 됩니다.
주요 transform 함수
- rotate(deg) : 요소를 지정한 각도만큼 회전합니다.
- scale(x, y) : 요소의 크기를 확대하거나 축소합니다.
- translate(x, y) : 요소를 X축, Y축 방향으로 이동시킵니다.
- skewX(deg), skewY(deg) : 요소를 지정한 각도만큼 기울입니다.
- matrix(n,n,n,n,n,n) : 여섯 개의 값을 사용해 2D 변환을 한 번에 정의합니다.
예제 코드
아래 예제는 버튼을 클릭하면 박스 요소가 시계 방향으로 60도 회전하는 코드입니다. 직접 실행하면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
margin-left: 20px;
border: 2px solid black;
width: 300px;
height: 250px;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<button onclick="display()">적용</button>
<div id="box"><p>데모 텍스트</p></div>
<script>
function display() {
document.getElementById("box").style.transform = "rotate(60deg)";
}
</script>
</body>
</html>
코드 설명
버튼을 클릭하면 display() 함수가 호출됩니다. 이 함수는 document.getElementById()로 id가 box인 div 요소를 선택한 뒤, 해당 요소의 style.transform 속성에 rotate(60deg) 값을 설정합니다. 그 결과 박스가 화면상에서 시계 방향으로 60도 회전하게 됩니다. 같은 방식으로 scale(), translate() 등 다른 transform 함수 값을 넣으면 다양한 2D·3D 효과를 손쉽게 구현할 수 있습니다.