CSS의 rotate3d() 함수는 HTML 요소를 3차원(3D) 공간에서 자유롭게 회전시키기 위해 사용되는 변형(transform) 함수입니다. 일반적인 rotate()가 화면 평면상에서만 회전을 처리하는 것과 달리, rotate3d()는 X, Y, Z 세 개의 축을 모두 활용해 입체적인 회전 효과를 만들어낼 수 있습니다.
rotate3d() 함수의 기본 문법
transform: rotate3d(x, y, z, angle);
각 매개변수의 의미는 다음과 같습니다.
- x : X축 방향 회전 벡터 값 (0 또는 1)
- y : Y축 방향 회전 벡터 값 (0 또는 1)
- z : Z축 방향 회전 벡터 값 (0 또는 1)
- angle : 회전 각도 (예: 45deg, 90deg 등)
즉, 회전할 축의 방향과 크기를 벡터로 지정하고, 마지막에 원하는 회전 각도를 함께 전달하면 됩니다.
예제 1: 이미지에 3D 회전 적용하기
다음 예제는 이미지에 rotate3d(1, 1, 1, 45deg)를 적용하여 세 축 모두를 기준으로 45도 회전시키는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: rotate3d(1, 1, 1, 45deg);
}
.skew_img {
transform-origin: left;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src=
"https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg"
alt="Numpy">
<img class="skew_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>실행 결과
위 결과를 보면 첫 번째 로고 이미지가 단순히 평면에서 기울어진 것이 아니라, 입체적으로 뒤틀리며 회전한 것을 확인할 수 있습니다.
예제 2: 텍스트 요소에 3D 회전 적용하기
rotate3d()는 이미지뿐만 아니라 텍스트와 같은 다른 요소에도 동일하게 적용할 수 있습니다. 아래 예제는 문단 텍스트에 rotate3d(1, 2, 0, 30deg)를 적용한 사례입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: rotate3d(1, 2, 0, 30deg);
color: red;
font-family: sans-serif;
font-size: 30px;
}
.skew_img {
transform-origin: left;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p class="demo">Learn Apache Spark</p>
<img class="skew_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>실행 결과
이처럼 rotate3d() 함수를 활용하면 벡터 값과 각도를 조절하는 것만으로도 다양한 방향의 3D 회전 애니메이션을 손쉽게 구현할 수 있습니다. 카드 플립 효과나 입체적인 UI 인터랙션을 만들 때 특히 유용하게 사용됩니다.