CSS 연습

DIV박스 회전 애니메이션 구현

<style>
    .card_box .item {
        width: 100px;
        height: 100px;
        border: 1px solid #828282;
        font-size: 35px;
        backface-visibility: hidden;
        transition: 1.5s;
    }

    .card_box .item.front {
        position: absolute;
        transform: rotateY(0deg);
    }

    .card_box:hover .item.front {
        transform: rotateY(180deg);
    }

    .card_box .item.back {
        transform: rotateY(-180deg);
    }

    .card_box:hover .item.back {
        transform: rotateY(0deg);
    }
</style>

<div class="card_box">
                <div class="item front">앞면</div>
                <div class="item back">뒷면</div>
</div>

backface-visibility

backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.

visible : 보이게 합니다. 기본값입니다.
hidden : 보이지 않게 합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

transition

transition은 속성을 서서히 변화시키는 속성입니다.
transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다.
IE는 버전 10부터 지원합니다.

transform

transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

transform: rotateY( angle )

angle에는 각의 크기를 입력합니다.
단위는 deg, rad, grad, turn 등을 사용합니다.
turn은 1회전, 즉 360deg를 의미합니다.