-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathperspective.html
More file actions
44 lines (43 loc) · 1.83 KB
/
Copy pathperspective.html
File metadata and controls
44 lines (43 loc) · 1.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<!-- 한국어 페이지 선언 -->
<html lang="ko">
<head>
<!-- 문자 인코딩 UTF-8 지정 -->
<meta charset="utf-8">
<!-- 브라우저 탭 제목 -->
<title>perspective - 자식 요소에 원근감을 부여하여 3D 깊이감을 만듭니다</title>
<!--
[변형] perspective
설명: 자식 요소에 원근감을 부여하여 3D 깊이감을 만듭니다
구문: perspective: none | <length>
팁: 부모에 perspective를 설정하면 자식들이 공통 시점을 공유. 값이 작을수록(200~400px) 극적인 원근, 클수록(800px+) 부드러운 원근.
-->
<style>
/* .scene: 3D 원근감을 부여하는 부모 컨테이너 */
.scene {
perspective: 400px; /* 400px 깊이의 원근감 - 비교적 강한 원근 효과 */
display: flex; /* 내부 카드 정렬용 flex */
justify-content: center; /* 가로 중앙 정렬 */
padding: 60px; /* 사방 60px 여백 */
}
/* .card: 3D로 회전된 카드 본체 */
.card {
transform: rotateY(40deg); /* Y축 기준 40도 회전 - 원근감이 명확히 드러남 */
background: linear-gradient(135deg, #06b6d4, #3b82f6); /* 청록→파란 그라디언트 */
color: white; /* 흰 글씨 */
padding: 40px 48px; /* 위아래 40px, 좌우 48px 내부 여백 */
text-align: center; /* 텍스트 가운데 정렬 */
border-radius: 12px; /* 모서리 12px 라운딩 */
font-weight: bold; /* 굵은 글씨 */
font-size: 28px; /* 글자 크기 28px */
box-shadow: 10px 10px 30px rgba(6,182,212,0.3); /* 청록색 그림자로 입체감 강조 */
}
</style>
</head>
<body>
<!-- perspective 400px 환경에서 40도 회전된 카드를 보여주는 시연 -->
<div class="scene">
<div class="card">3D</div> <!-- 원근감이 적용된 회전 카드 -->
</div>
</body>
</html>