CSS3 3D 변환 함수 완벽 정리: matrix3d부터 translateZ까지

CSS3 3D 변환이란?

CSS3의 3D 변환(3D Transform) 기능을 사용하면 HTML 요소를 X축, Y축, Z축 방향으로 자유롭게 이동, 회전, 확대·축소할 수 있습니다. 2D 변환이 화면 평면 위에서만 동작한다면, 3D 변환은 깊이(Z축) 개념까지 활용해 입체적인 효과를 구현할 수 있다는 점이 가장 큰 차이입니다.

3D 변환을 제대로 보여주려면 일반적으로 perspective() 함수를 함께 사용합니다. 원근감(perspective) 값이 있어야 요소가 실제로 3차원 공간에 놓인 것처럼 렌더링되기 때문입니다.

주요 CSS3 3D 변환 함수

3D 변환을 호출할 때 사용하는 대표적인 메서드는 다음과 같습니다.

번호	함수 및 설명
1	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 16개의 행렬(matrix) 값을 사용해 요소를 한 번에 변환합니다. 복잡한 3D 변환을 하나의 함수로 처리할 때 유용합니다.
2	translate3d(x,y,z) X축, Y축, Z축 세 방향의 값을 지정하여 요소를 이동시킵니다.
3	translateX(x) X축(가로) 방향으로만 요소를 이동시킵니다.
4	translateY(y) Y축(세로) 방향으로만 요소를 이동시킵니다.
5	translateZ(z) Z축(화면 앞뒤 깊이) 방향으로 요소를 이동시킵니다. 양수는 관찰자 쪽으로, 음수는 화면 안쪽으로 이동합니다.

이 외에도 rotateX(deg), rotateY(deg), rotateZ(deg), scale3d(x,y,z) 등 다양한 3D 변환 함수가 제공됩니다.

예제 코드

다음은 rotateX, rotateY, translateZ를 활용한 CSS3 3D 변환 함수 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
    display: inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid #CCC;
    margin-left: 20px;
}
.rotateX {
    width: 100%;
    height: 100%;
    background: rgb(52, 0, 241);
    transform: perspective(600px) rotateX(85deg);
}
.rotateY {
    width: 100%;
    height: 100%;
    background: rgb(55, 0, 255);
    transform: perspective(600px) rotateY(75deg);
}
.translateZ{
    width: 100%;
    height: 100%;
    background: rgb(55, 0, 255);
    transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>

코드 설명

.rotateX: perspective(600px)로 원근감을 설정한 뒤 X축 기준으로 85도 회전하여 요소가 눕듯이 기울어진 모습을 만듭니다.
.rotateY: Y축 기준으로 75도 회전하여 요소가 옆으로 돌아간 듯한 입체 효과를 줍니다.
.translateZ: Z축 방향으로 -200px 이동시켜 요소가 화면 안쪽으로 들어가며 작아지는 원근 효과를 나타냅니다.

실행 결과

위 코드를 실행하면 각 컨테이너 안에서 파란색 사각형 요소가 서로 다른 방식으로 3D 변환된 결과를 확인할 수 있습니다.

CSS3 3D 변환 함수 완벽 정리: matrix3d부터 translateZ까지

마무리

CSS3 3D 변환 함수는 카드 플립, 회전 갤러리, 패럴랙스 스크롤 등 현대적인 웹 UI를 만드는 데 필수적인 기술입니다. perspective와 함께 조합하면 훨씬 자연스러운 입체 효과를 얻을 수 있으니, 다양한 각도와 거리 값을 실험해 보시기 바랍니다.