perspective

 

🟢 perspective

3D 공간에서 카메라와 요소 사이의 거리를 설정하여 입체감(원근감)을 결정하는 속성.

 

🔹 perspective

@keyframes rotate {  
  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

• perspective(값) 의 (값)은 카메라의 거리.
  • 값: 작다 (100px) → 의미: 카메라가 가까움 → 결과: 원근감(왜곡) 큼 → 강한 3D
  • 값: 크다 (1000px) → 의미: 카메라가 멀음 → 결과: 원근감(왜곡) 작음 → 평면에 가까움

 

 

🔥 perspective 의 두 가지 사용 방법 🔥

1️⃣ transform 함수로서의 perspective()

.box {
    transform: perspective(200px) rotateY(45deg);
}

• 특징:
  • transform 안에서 함수처럼 사용.
  • 해당 요소에만 적용.
  • 다른 변형(rotate, scale 등)과 함께 사용.
  • 간단한 3D 효과에 적합.

 

2️⃣ CSS 속성으로서의 perspective

.container {
    perspective: 200px;
}

.box {
    transform: rotateY(45deg);
}

• 특징:
  • 부모 요소가 3D 공간을 생성.
  • 자식 요소들의 3D 변형에 영향.
  • 자식 요소들이 같은 공간 기준으로 움직임.
  • 더 자연스럽고 일관된 3D 효과.

👉 실무에서 더 많이 사용됨.

 

---

 

📊 차이 비교 📊

구분	transform: perspective()	perspective 속성
적용 대상	자기 자신	부모 요소  →  자식 요소
사용 위치	transform 안	독립 속성
효과	간단한 3D	실제 공간감 있는 3D
실무 사용	간단 효과	복잡한 3D UI
핵심	“카메라를 요소에 직접 붙임”	“카메라를 부모에 설치해서 공간 생성”

 

---

 

🎯 perspective + 3D 핵심 속성들 🎯

🔹 transform-style

자식 요소를 3D 공간에 유지할지 결정.

.container {
    transform-style: preserve-3d;
}

 

• flat: 자식이 평면으로 눌림. (기본값)
• preserve-3d: 자식 요소들이 3D 상태 유지.

 

 

🔹 backface-visibility

요소의 뒷면을 보이게 할지 숨길지 결정.

.box {
    backface-visibility: hidden;
}

 

• visible: 뒤집히면 뒷면 보임. (기본값)
• hidden: 뒤집히면 안 보임.

 

 

🔹 perspective-origin

카메라 위치 조정

.container {
    perspective: 500px;
    perspective-origin: left;
}

• center: 정면. (기본값)
• left: 왼쪽 시점.
• right: 오른쪽 시점.
• top: 위에서 내려다봄.
• bottom: 아래에서 올려다봄.

👉 또는 좌표로도 가능 (%)

 

 

📍  POINT 📍 

✔️ transform: perspective() 는 간단한 회전 효과,

perspective 속성 은 카드&큐브&UI,

perspective + preserve-3d 는 여러 요소 3D ✔️

 

 

📋 속성별 상세 요약표 📋

속성 / 함수	적용 대상	역할	핵심 포인트
perspective	부모	3D 공간 생성	값 작으면 입체감 강, 값 크면 평면 느낌
perspective()	요소(transform)	카메라 거리 적용	단일 요소 3D 효과, transform 안에서 사용
perspective-origin	부모	카메라 위치 지정	기본 center, left/top 등 조정 가능
transform-style	부모/요소	자식 3D 유지 여부	preserve-3d → 3D 유지, flat → 평면
backface-visibility	요소	뒷면 보임 여부	hidden → 카드 뒤집기 시 뒷면 숨김
transform (rotateX/Y/Z)	요소	회전/3D 이동	perspective와 함께 사용해야 입체감

 

---

 

⚙️ 실전 예제 코드 ⚙️

.container {
    perspective: 800px;
}

.card {
    width: 200px;
    height: 300px;
    transform-style: preserve-3d;
    transition: 0.6s;
}

.card:hover {
    transform: rotateY(180deg);
}