AAtomic CSS

perspective

3D 변환 요소에 원근감을 부여합니다. 값이 낮을수록 강렬한 3D 효과를, 높을수록 미묘한 효과를 만듭니다. per100rem은 미묘한 깊이감, per50rem은 극적인 원근감을 제공합니다.

클래스 목록

패턴: per{값}{단위}

클래스CSS설명
per30remperspective: 30rem300px — 매우 극적인 3D 효과
per50remperspective: 50rem500px — 극적인 원근감
per80remperspective: 80rem800px — 자연스러운 원근감
per100remperspective: 100rem1000px — 미묘한 깊이감
per150remperspective: 150rem1500px — 매우 미묘한 효과
per500pxperspective: 500px500px (px 단위)
per1000pxperspective: 1000px1000px (px 단위)

시각적 비교

동일한 Y축 30도 회전에 perspective 값에 따른 차이를 비교합니다.

극적 (50rem) — per50rem

3D

자연스러운 (80rem) — per80rem

3D

미묘한 (150rem) — per150rem

3D

사용 예시

<!-- 카드 플립 컨테이너 -->
<div class="per100rem">
  <div class="tsp3d tall600msease hover-tryy180deg">
    <div class="pa w100p h100p bfvh bg6366F1">앞면</div>
    <div class="pa w100p h100p bfvh tryy180deg bg34D399">뒷면</div>
  </div>
</div>

<!-- 극적인 3D 기울기 -->
<div class="per50rem">
  <div class="trx20deg">극적인 기울기</div>
</div>

<!-- 자연스러운 호버 틸트 -->
<div class="per100rem">
  <div class="tall300msease hover-tryy15deg">
    호버하면 살짝 기울어짐
  </div>
</div>

팁 & 주의사항

부모에 적용

perspective는 3D 변환이 적용된 요소의 부모에 지정합니다. 자식 요소들이 동일한 원근 공간을 공유하게 됩니다.

값 가이드

50rem(500px) 이하: 극적인 효과. 80rem~120rem(800~1200px): 자연스러운 효과. 보통 per80rem ~ per100rem 범위가 가장 자연스럽습니다.

transformtransform-styletransform-originbackface-visibility