[CSS] 3D 효과 (perspective)

Chen·2024년 6월 4일

3D CSS perspective

CSS

목록 보기

5/8

Transform rotate과 다른 점?

CSS에서 transform: rotate 자체로는 3d 느낌을 줄 수 없음
결국, 3차원 공간으로 만들어줘야 함

[번외] rem 과 em 의 차이

rem, em 모두 상대적인 길이 단위를 나타냄, 상위 객체에 대한 기준이 다를 뿐

rem = DOM Tree에서 가장 상단에 있는 elm 길이 기준으로 변화 (즉, rem은 <html> 의 font-size 속성값이 기준)

em = 적용된 elm의 직계 부모 길이 기준으로 변화

card {
    border-radius: 0.5em;
    font-size: 1.5rem;
}

/*   폰트사이즈에 border-radius가 비례하도록 하는 의도 */

cf. 보통 font-size에는 rem, padding이나 margin같이 화면에 따라 유연하게 변하는 크기는 em 사용

3D 공간은 perspective 속성으로

perspective 속성

// 현재 html 구조

    <div class="world">
        <div class="card">CARD</div>
        <div class="card">CARD</div>
        <div class="card">CARD</div>
    </div>

사람 눈에 가까이 있을수록, 3D 효과가 "극적"으로 보임

perspective: 1000px (완만하게)
perspective: 500px (조금 더 "극적"으로)

.world {
	perspective: 500px;
}

perspective으로 동일한 3d 효과를 주고싶을 때

부모 elm에 perspective를 주게 되면, 바로 위 그림처럼 카드의 3d 효과는 상대적으로 나타난다

하지만 예를 들어, 2d 카드게임에서는 카드 패에 동일한 3d 효과가 적용되어야 함

부모 elm이 아닌 본인의 transform 속성에게 perspective 을 주면 된다!

.card {
	transform: perspective(500px) rotateY(45deg);
}

결론

극적으로, 리얼한 3d 효과를 주고 싶다면 => 부모 elm에게 perspective
동일한 3d 효과를 주고 싶으면 => 본인 자체의 transform 속성에게 perspective

Chen

현실적인 몽상가

이전 포스트

[CSS] Animation / imageSprites

다음 포스트