[CSS] - 3D 애니메이션 구현 (backface-visibility, perspective, rotate)

[CSS] - 3D 애니메이션 구현 (backface-visibility, perspective, rotate)Frontend/CSS2025. 2. 8. 17:04@동혁이

Table of Contents

3D 애니메이션 구현 (backface-visibility, perspective)

완성본

배운점

요소 회전 시키기 (동전 뒤집기)

요소를 회전시켰을 때 원근감이 느껴지도록 하려면 rotate와 perspective를 함께 사용해야 합니다.

스타벅스 배지가 실제로 이미지에 붙어 있는 것 같은 효과를 주기 위해 회전 효과가 필요했는데 rotateX 뿐만 아니라, 다음처럼 스크린을 감싸는 부모 요소에 perspective라는 프로퍼티를 추가해줘야 했습니다.

그 이유는 perspective가 원근감을 결정하기 때문!

1. 초기 모습, 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        background-color: #313b54;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
      }
      .container {
        width: 100px;
        height: 100px;
      }
      .container .item {
        width: 100px;
        height: 100px;
        background-color: transparent;
        border: 2px solid red;
        color: white;
        font-size: 60px;
      }
      .container .item.front {
        transform: rotateY(0deg);
      }
      .container .item.back {
        transform: rotateY(180deg);
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="item front">앞</div>
      <div class="item back">뒤</div>
    </div>
  </body>
</html>

2. absolute

- front에 absolute를 넣어 부모 요소를 기준으로 배치해줍니다.

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

그렇다면 요소가 위에서부터 아래로 쌓여져 있는 주변의 형제 요소들과 어떤 상호작용이 무너지면서 요소가 겹쳐지는 것을 확인할 수 있습니다.

여기서 중요한 것은 부모 요소를 기준으로 배치를 하려는 목적이 아니고 요소를 겹치게 하는 용도로 단순히 position absolute를 사용했다는 겁니다!

3. backface-visibility

- backface-visibility 속성을 사용해 뒷면이 어떻게 처리될 것인지에 대해서 컨트롤 할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility

backface-visibility - CSS: Cascading Style Sheets | MDN

CSS backface-visibility 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다.

developer.mozilla.org

item에 backgace-visibility: hidden을 추가해줍니다.

.container .item {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red;
    color: white;
    font-size: 60px;
    backface-visibility: hidden;
}

이제 뒤라는 글자가 안보입니다.

왜 그러냐면 Y축을 통해서 180도 뒤집었고 뒤집어진 뒷면이 화면에 보이고 있었던 상태였는데

backface-visibility: hidden; 값을 추가하면서 뒷 면을 화면에서 안보이게 하겠다라고 설정을 했기 때문입니다.

(당연히 앞도 뒤집으면 안보이겠죠?!)

4. rotate

- hover 속성을 추가해 container에 마우스를 올렸을때 front를 뒤로 뒤집고 back을 다시 원래 각도 0으로(앞으로) 오게해봤습니다.

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

너무 부자연스럽기 때문에 전환 효과(transition)를 추가해 보겠습니다.

.container .item {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red;
    color: white;
    font-size: 60px;
    backface-visibility: hidden;
    transition: 1s;
}