CSS의 scale3d() 함수는 요소를 3차원 공간에서 확대하거나 축소할 때 사용하는 변환(transform) 함수입니다. X축, Y축, Z축 각각에 대해 크기 배율을 숫자 값으로 지정하면, 해당 값만큼 요소가 3D 공간에서 조절됩니다.
scale3d() 함수의 기본 문법
scale3d() 함수는 세 개의 매개변수를 받습니다.
transform: scale3d(x, y, z);
- x : 가로 방향(X축)의 크기 배율
- y : 세로 방향(Y축)의 크기 배율
- z : 깊이 방향(Z축)의 크기 배율
값이 1이면 원래 크기를 유지하고, 1보다 크면 확대되며, 1보다 작으면 축소됩니다. 음수 값을 사용하면 해당 축을 기준으로 뒤집힌(flipped) 효과가 나타납니다.
예제 1: scale3d(0.5, 1, 1.7)
다음 예제는 이미지를 X축으로 절반(0.5), Y축은 그대로(1), Z축으로는 1.7배 확대하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>실행 결과
X축 값이 0.5이므로 이미지의 가로 길이가 절반으로 줄어든 것을 확인할 수 있습니다.
예제 2: scale3d(-1.4, 0.4, 0.7)
이번에는 음수 값을 포함한 예제를 살펴보겠습니다. X축에 -1.4를 지정하면 이미지가 좌우로 뒤집히면서 1.4배 확대됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>실행 결과
X축의 음수 값(-1.4)으로 인해 이미지가 수평 방향으로 뒤집혀 표시되고, 세로는 0.4배로 축소된 결과를 볼 수 있습니다.
정리
scale3d() 함수는 CSS3의 3D 변환 기능 중 하나로, 하나의 선언만으로 요소를 세 축 방향으로 자유롭게 크기 조절할 수 있습니다. 특히 Z축 스케일링은 perspective 속성과 함께 사용하면 더욱 입체적인 효과를 연출할 수 있어, 카드 플립이나 3D 애니메이션 등 다양한 UI 구현에 활용됩니다.