CSS의 transform-style: preserve-3d 소개
CSS 변환을 사용하면 요소를 2D 및 3D 공간에서 회전, 확대/축소, 기울이기 및 이동할 수 있습니다. 3D 변환을 다룰 때 이해해야 할 중요한 속성 중 하나는 transform-style: preserve-3d입니다. 이 속성은 자식 요소가 3D 변환 위치를 유지하도록 하여 더 복잡하고 현실적인 3D 효과를 가능하게 합니다.
transform-style이란?
transform-style 속성은 자식 요소가 2D 또는 3D 공간에서 렌더링될지 여부를 결정합니다. 두 가지 값이 있습니다:
flat: 기본값입니다. 자식 요소가 2D로 렌더링되어 3D 변환을 적용해도 기대한 효과가 나타나지 않습니다.preserve-3d: 자식 요소가 3D 공간에서 렌더링되어 3D 변환이 유지됩니다.
문법
element {
transform-style: preserve-3d;
}실용적인 예시
예시 1: 기본 3D 회전
다음은 flat과 preserve-3d의 차이점을 보여주는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 회전 예제</title>
<style>
.container {
perspective: 800px;
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
}
.box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
transform: rotateY(45deg);
background-color: tomato;
transition: transform 0.5s;
}
.flat .box {
transform-style: flat;
}
.preserve-3d .box {
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(45deg) translateZ(50px);
}
</style>
</head>
<body>
<h1>3D 회전 예제</h1>
<div class="container flat">
<div class="box">Flat</div>
</div>
<div class="container preserve-3d">
<div class="box">Preserve 3D</div>
</div>
</body>
</html>이 예제에서는 transform-style: flat을 사용하는 컨테이너와 transform-style: preserve-3d을 사용하는 컨테이너 두 개가 있습니다. 박스를 호버하면, preserve-3d를 사용한 박스는 자식 요소가 3D 위치를 유지하기 때문에 더 뚜렷한 3D 효과를 보여줍니다.
예시 2: 3D 큐브 만들기
더 복잡한 예로 3D 큐브를 만드는 방법을 소개합니다. 이는 3D 공간에서 여러 요소를 배치해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 큐브 예제</title>
<style>
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(45deg);
animation: rotateCube 10s infinite linear;
}
.face {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 0.7);
border: 1px solid #ccc;
}
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotateCube {
from { transform: rotateX(30deg) rotateY(45deg); }
to { transform: rotateX(30deg) rotateY(405deg); }
}
</style>
</head>
<body>
<h1>3D 큐브 예제</h1>
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</body>
</html>이 예제에서는 여섯 개의 면을 정의하고 translateZ 및 rotate 변환을 사용하여 3D 공간에 배치하여 3D 큐브를 만듭니다. .cube 컨테이너에 transform-style: preserve-3d 속성을 적용하여 모든 면이 서로의 3D 위치를 유지하도록 합니다.
결론
transform-style: preserve-3d 속성은 웹 디자인에서 현실적인 3D 효과를 만드는 데 필수적입니다. 자식 요소가 3D 변환 위치를 유지하도록 함으로써 복잡하고 시각적으로 매력적인 3D 구조를 만들 수 있습니다. 미묘한 깊이를 추가하거나 복잡한 3D 객체를 구축하든, transform-style: preserve-3d를 이해하고 활용하는 것은 CSS 변환을 마스터하는 중요한 단계입니다.
'UX 개발 > CSS - 3D' 카테고리의 다른 글
| CSS 3D 활용하기 - 3D transform (0) | 2024.06.22 |
|---|---|
| CSS 3D 시작하기 - perspective 속성의 이해 (0) | 2024.06.22 |
