CSS - 3D #1

CSS 3D를 만들 땐, 만약 카드를 회전을 시켜서 3D로 보이게끔 만들 때
보통 transform: rotateY() 지정해서 옆으로 돌린다거나 할 수 있다 하지만 3D 느낌으로 보이진 않는데 이럴 때, 카드를 감싸고 있는 공간 엘리먼트를 삼차원으로 바꿔준다 즉, 무대 자체가 3D가 되어야한다는 의미

셋팅

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

.world {
    width: 80vw;
    height: 80vh;
    background: slateblue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 150px;
    margin: 1em;
    background: tomato;
    border-radius: 0.5em;
    font-size: 1.5rem;
}

transform 지정

.card {
	transform: rotateY(45deg)
   }

현재 보이는건 이상태인데 짜부된거같고 3D모양이 아니다
처음 작성한 내용처럼 전체 공간을 3D로 지정해줘야한다

3D 공간 만들기

원근감을 만든다

.world {
	perspective: 1000px;
}

안에 있는 요소들이 3D 효과를 받게된다

여기서 perspective 속성에 부여한 px 크기의 의미는, 사람 눈에 카드가 보이는데 보이는 크기를 떠나서 카드 모양만 보자면 가까이 있을 수록 더욱 극적으로 보일테고 3D효과가 정말 잘 보인다 하지만 멀리 있다면 조금 완만하게 보이게 된다(대충 핸드폰을 들고 3D처럼 비스듬이 돌려서 가까이 봤다가 멀리 봐보자) 즉 얼마나 멀리있는 시점으로 볼 것이냐 라는 의미를 가진다

코드로 살펴보자
perspective: 500px;

perspective: 100px;

크기를 보는 것이 아닌 모양을 봐야한다

다시 500px로 돌려놓고 봤을 때, 보통 사람 눈에서 보면 모든 카드가 동일하게 꺽여있는 모습으로 보여야한다 어떤거은 더 휘어보이고 어떤것은 덜 휘어보이면 디자인 측면에서도 이상하다 이럴 때 perspective 속성이 아닌 card 요소 자체에 transform 안에 perspective 추가 속성을 준다

코드 정리

.world {
    width: 80vw;
    height: 80vh;
    background: slateblue;
    display: flex;
    align-items: center;
    justify-content: center;
    /* perspective: 500px; */
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 150px;
    margin: 1em;
    background: tomato;
    border-radius: 0.5em;
    font-size: 1.5rem;
    transform: perspective(500px) rotateY(45deg)
}