코드 유인원

우리는 transform 포스팅에서 CSS속성을 이용해 회전시키는 법을 배웠다

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

html코드
world는 녹색 박스 card는 빨강 박스

기본적인 css스타일 코드는 생략

transform: rotateY(45deg);

위 코드를 카드의 css에 추가해 카드를 뒤집듯이 Y축으로 45도 회전 시켜보자

회전이 된건가? 그냥 찌부시킨 걸로 밖에 보이지 않는다

3D효과를 제대로 주기 위해선 투영점을 줘서 공간감을 줘야하는데

.world{
    display:flex;
    ...
    ...

    perspective: 500px;
}

px값은 대충 대상과의 거리값 정도로 생각하면 된다

제대로 적용되었다

하지만 컨테이너 안에 개체가 여러개면 효과가 조금 달라진다

보는 바와 같이 하나의 투영점에서 각기 다른 물체를 보는 것이기 때문에 서로 다르게 입체감을 가진다

이게 싫고 모두 같은 입체감을 가지길 원한다면

2. 주려는 대상의 trasnform속성에 perspective값 추가

.card{
    display:flex;
    ...
    ...

    transform: perspective(500px) rotateY(0deg);
}

역시나 잘 적용되었다

개체가 여러개이면?

모두 같은 입체감을 가지고 있다

검색