HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기

미리보기

이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다.

 

HTML

우선 HTML 을 아래와 같이 구성해줍니다. 

<div class='container'>
  <span class=' card' style="--i:1"></span>
  <span class=' card' style="--i:2"></span>
  <span class=' card' style="--i:3"></span>
  <span class=' card' style="--i:4"></span>
  <span class=' card' style="--i:5"></span>
  <span class=' card' style="--i:6"></span>
  <span class=' card' style="--i:7"></span>
  <span class=' card' style="--i:8"></span>
</div>

 

부연설명을 해보자면, 3D 효과를 적용하고, 카드의 중심축이 되어 실제 회전 효과를 구현하는데 사용되는 .container 요소와 각 카드를 표현하는 .card 요소들을 만들어줍니다.

 

그리고, 각 카드의 각도를 계산하는데 사용할 CSS 변수인 --i 에 각각 1 ~ 8 까지 값들을 순서대로 할당해 줍니다.

CSS

CSS 초기화 및 초기 설정

이번에는 기초 셋팅으로 기본설정된 값을 초기화하고, container 요소를 수직-수평으로 중앙정렬 해보겠습니다.

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#333;
}

 

우선 *(루트요소 = <thml/>) 전체에 기본으로 설정된 여백을 제거하고, 콘텐츠의 길이에 여백을 결정하는 속성(padding과 margin) 이 포함되어 계산되도록 margin:0, padding:0, box-sizing:border-box 를 각각 추가해 줍니다.

 

그 후 body 요소의 width와 height를 각각 100%, 100vh 로 지정하여 해당 요소가 뷰포트의 전체를 가득 채우도록 해주고, display를 flex로, justify-content 와 align-items를 center 로 지정해주어 수직-수평으로 그 아래 자식 요소가 정렬되도록 해줍니다. 마지막으로 background 를 #333 으로 지정하여 약간 밝은 검은색이 되도록 설정해줍니다.

 

container 요소 설정

이번에는 카드 컴포넌트의 컨테이너 역할을 하는 요소를 설정해보겠습니다.

.container {
  position:relative;
  width:130px;
  height:130px;
  transform: perspective(1000px) rotateX(0deg);
  animation:60s round infinite linear;
  transform-style:preserve-3d;

 

우선 position을 relative 로 설정하여, 자식요소가 absolute 로 position을 지정할 때, 절대좌표(0,0)의 기준점이 해당 container 요소의 좌측 최상단의 모서리가 되도록 해줍니다.

 

그 후 width와 height를 130px 로 지정하여 자식 요소(카드)의 최대 크기가 130px 를 벗어나지 못하도록 설정해줍니다.

 

transform 의 경우 perspective을 1000px 로 지정하여 해당 container 요소에 원근감을 부여하고, rotateX를 0deg 로 지정하여 회전하기 전의 초기 각도를 설정해줍니다.

 

animation 의 경우 60s round infinite linear 로 지정하여 60초 동안 무한으로 선형적인 간격으로 애니메이션이 진행되도록 해줍니다. 여기서 round 는 애니메이션을 실행할 키프레임의 사용자정의 별칭 입니다.

 

마지막으로 transform-style을 preserve-3d 로 지정하여 3d 효과가 해당 container 요소의 자식 요소들도 모두 적용될 수 있도록 설정해줍니다. 이렇게 되면 부모 요소에 3d 효과가 적용될 때 자식요소도 해당 3d 효과가 적용되어 3d 입체적인 모습으로 화면에 나타나게 됩니다.

 

 

.card 요소 설정

마지막으로 카드 요소를 꾸며보겠습니다.

.card {
    box-shadow:0 0 20px 0 white;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:white;
    transform:rotateY(calc(var(--i) * 45deg)) translateZ(250px);
    
  }

 

 

box-shadow를 0 0 20px 0 white 로 지정하여 흐릿한 하얀색 그림자가 카드의 주위로 퍼져나가는 효과를 만들어 줍니다.

그 후 position을 absolute 로 지정하여 card 요소 모두가 현재 레이아웃의 독립된 절대좌표에 의해 조작가능하도록 설정해줍니다.

 

left와 top 을 0 으로 지정하여 position: relative 가 설정된 부모 요소의 좌측 최상단 모서리에 card 요소의 좌측 최상단 모서리의 위치와 일치하도록 해줍니다.

 

width와 height를 100% 로 지정하여 해당 card 요소가 부모인 container 요소의 크기에 가득차도록 해줍니다. 이 경우 container 요소에 지정한 130 x 130 px 사이즈에 가득찬 형태가 됩니다.

 

마지막으로  transform:rotateY(calc(var(--i) * 45deg)) translateZ(250px); 를 설정해주었습니다. 여기서 --i 는 앞서 HTML 에서 설정한 --i:1, --i:8 까지의 값을 가지고 있는데요, var 메소드의 경우 --i 에 할당된 값을 반환해 주는 CSS 함수입니다. 그리고 calc 함수는 인자로 전달받은 표현식을 평가하여 값을 반환하는 함수입니다.

 

즉, calc( 5 * 5deg) 의 경우 25deg 가 그 자리에 남게 됩니다. 끝으로 translateZ를 250px; 정도로 지정하여 Card 요소가 중심점을 기준으로 250px 만큼 앞으로 나오게 해줍니다. 참고로 Z는 사물의 앞뒤 위치를 나타내는 좌표 입니다.

 

 

키프레임 설정 | 애니메이션 실행 

앞서 모든 설정이 완료되었다면, 애니메이션을 실행해줍니다.  아래 옵션대로 라면 원근감을 1000px 을 유지한 상태에서 Y 축 방향으로 3600deg 회전하고,  X 축 방향으로 15deg 기울어져 60s 동안 애니메이션이 진행되게 됩니다.

@keyframes round {
	
  0%{
    transform:perspective(1000px) rotateY(3600deg) rotateX(15deg);
  } 
}

 

구현 결과

원리만 알면 그리 어려운 애니메이션은 아니었습니다. 이것을 응용해서 다양한 애니메이션을 구현하는 시간이 되신다면 좋겠네요. 고생하셨습니다. 

 

See the Pen 3d rotate by youngwan2 (@youngwan2) on CodePen.

 

다음 애니메이션 

CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작