[css] 카드 뒤집기, 이미지 앞뒤 회전 3d 애니메이션 효과

3차원 애니메이션 효과

 

CSS를 이용한 

3차원 애니메이션 효과 설정입니다. 

 

구현 내용

이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서
이미지의 뒷면이 출력되고, 
이미지에서 마우스를 내리면 다시 원래 이미지로 회전하면서 
다시 앞면 이미지가 나오게 됩니다. 

 

카드 뒤집기와 같이 이미지를 앞면, 뒷면을 교차적으로 출력하면서
3차원의 애니메이션 효과를 css를 통하여 구현할 수 있습니다.

 

css로 3차원 애니메이션 효과 기본 동작

html

<div class="container">
  <div class="item front">앞면(이미지 앞면)</div>
  <div class="item back">뒷면(이미지 뒷면)</div>
</div>

 

css

    body {
      padding: 30px;
    }

    .container {
      width: 150px;
      height: 200px;
      perspective: 300px; //부모의 자식 요소가 3차원의 애니메이션 효과를 가질때, 300px의 거리에서 보는 원근감을 줌
    }

    .container .item {
      width: 150px;
      height: 200px;
      border: 1px solid #828282;
      font-size: 35px;
      backface-visibility: hidden; //카드의 뒷면을 안보이게 처리-카드가 뒤집히면 뒷면이 안보임
      transition: 1s;
    }

    .container .item.front {
      //앞면 카드가 부유하게 되어, 뒷면 카드가 아래에서 위로 올라감 -> 요소 두개가 겹치게 됨
      position: absolute;
      transform: rotateY(0deg); //명시적으로 기본값 설정, 없어도 됨
    }

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

    .container .item.back {
      transform: rotateY(-180deg);//y축을 중심으로 -180도 회전
    }

    .container:hover .item.back {
      transform: rotateY(0deg);
    }

 

화면 보기 (Result 클릭)

 

css로 이미지 3차원 애니메이션 효과 예제

<img> 태그를 이용하여 사용할 이미지를 삽입하고, 위의 css를 적용합니다. 

 

화면 보기 (Result 클릭)