반응형
주요 참고자료
CSS perspective
CSS에서 perspective 속성은 3D 변환된 요소에 원근감을 적용하는 데 사용됩니다. 이는 요소가 뒤로 물러나거나 앞으로 나오는 것처럼 보이게 하여 깊이감을 만듭니다.
주요 포인트:
perspective속성: 모든 자식 요소들이 보이는 관점을 정의합니다. 값이 낮을수록 시점이 요소에 더 가까워지며, 따라서 3D 효과가 더욱 두드러집니다.perspective-origin속성: 원근 속성의 원점을 설정합니다. 이는 사용자가 보는 위치를 정의합니다. 기본값은50% 50%(중앙)입니다.
구문:
/* 요소의 자식에게 원근감을 적용 */
.element {
perspective: 600px;
}
/* 원근감의 원점을 설정 */
.element {
perspective-origin: 50% 50%;
}실용적인 예제:
예제 1: 기본 3D 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
perspective: 600px;
}
.box {
width: 100px;
height: 100px;
background-color: tomato;
transform: rotateY(45deg);
transition: transform 0.5s;
}
.box:hover {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>설명: .container는 자식 요소 .box에 영향을 주는 perspective를 600px로 설정합니다. .box를 마우스로 가리키면 Y축을 기준으로 회전하여 3D 효과가 나타납니다.
예제 2: 여러 요소와 함께하는 원근감
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.scene {
perspective: 800px;
perspective-origin: 50% 50%;
}
.card {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.card:hover {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 200px;
height: 200px;
backface-visibility: hidden;
}
.front {
background-color: lightcoral;
}
.back {
background-color: lightblue;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="scene">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
</body>
</html>설명: 이 예제는 플립 카드 효과를 만듭니다. .scene은 .card에 perspective를 제공합니다. .card는 자식 요소에 3D 변환을 유지하기 위해 transform-style: preserve-3d를 사용합니다. 마우스를 가리키면 카드가 Y축을 기준으로 180도 회전하여 뒷면을 드러냅니다.
팁:
perspective값은 양수여야 하며, 일반적으로 100px에서 1000px 사이의 값을 사용하여 원하는 깊이 효과를 얻을 수 있습니다.perspective-origin을 사용하여 사용자가 보는 위치를 제어할 수 있습니다. 예를 들어,perspective-origin: left는 사용자가 왼쪽에서 보는 것처럼 보이게 합니다.transform속성의 3D 함수인rotateX,rotateY,rotateZ,translateZ와 함께 사용하여 다양한 3D 효과를 만들 수 있습니다.
결론:
perspective 속성은 CSS에서 3D 효과를 생성하고 디자인에 깊이를 더하며 상호작용을 증가시키는 강력한 도구입니다. perspective 값을 조정하고 3D 변환과 결합하여 다양한 놀라운 시각 효과를 얻을 수 있습니다.
반응형
'UX 개발 > CSS - 3D' 카테고리의 다른 글
| CSS 3D 최적화하기 - transform-style: preserve-3d (0) | 2024.06.22 |
|---|---|
| CSS 3D 활용하기 - 3D transform (0) | 2024.06.22 |
