[프론트엔드] 움직이는 3D 카드 효과 만들기

 본 포스팅은 아래 코딩애플님의 동영상 '바로 쿠팡 취업가능한 포트폴리오 만들기'를 참고하여 작성하였습니다.

---

https://youtu.be/YDCCauu4lIk?si=hYyzxZVK5CIwoprZ

---

 

0. 준비

• 카드로 사용할 이미지 1장(images/3vx2.webp)
• HTML 파일(index.html)

디렉토리 구조

 

 

1.  카드 이미지 파일 출력

<div class="container">
    <div class="card"></div>
</div>

<style>
    .container {
        width: 220px;
        height: 310px;
    }
    
     .card {
        width: 220px;
        height: 310px;
        background-image: url(images/3vx2.webp);
        background-size: cover;
    }
</style>

1. 카드 이미지 출력 결과

 

 

2. 마우스 움직임에 따라 카드 이미지 회전

<script>
    var container = document.querySelector('.container')
    container.addEventListener('mousemove', function(e) {
        var x = e.offsetX
        var y = e.offsetY
        var rotateX = 4/30 * y - 20
        var rotateY = -1/5 * x + 20

        container.style = `transform: perspective(350px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
    })
</script>

 

2. 움직이는 카드 효과 결과

 

 container영역에 마우스의 좌표(e.offsetX, e.offsetY)에 따라서 transform 속성을 줘서 카드 이미지를 회전시킨다.

transform: 요소의 변형을 정의하는 CSS 속성입니다.
회전, 이동, 크기 조절, 기울임 등의 효과를 적용할 수 있습니다.

perspective(350px): 3D 변형 효과를 줄 때 원근감을 설정합니다.
값이 작을수록 원근감이 강해져서 더 극적인 효과를 낼 수 있습니다.

rotateX(${rotateX}deg): 요소를 X축을 기준으로 회전시킵니다.
즉, 마우스가 위아래로 움직일 때 요소가 X축을 기준으로 회전합니다.

rotateY(${rotateY}deg): 요소를 Y축을 기준으로 회전시킵니다.
즉, 마우스가 좌우로 움직일 때 요소가 Y축을 기준으로 회전합니다..

 

 

3. 카드 이미지에 광원(빛) 효과 주기

<div class="container">
    <div class="overlay"></div>
    <div class="card"></div>
</div>

<script>
    var container = document.querySelector('.container')
    var overlay = document.querySelector('.overlay')
    container.addEventListener('mousemove', function(e) {
        var x = e.offsetX
        var y = e.offsetY
        var rotateX = 4/30 * y - 20
        var rotateY = -1/5 * x + 20

        overlay.style = `background-position: ${x/5 + y/5}%`
        container.style = `transform: perspective(350px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
    })

    container.addEventListener('mouseout', function() {
        overlay.style = 'filter: opacity(0)'
        container.style = 'transform: perspective(350px) rotateY(0deg) rotateX(0deg)'
    })
</script>

<style>
    .container {
        width: 220px;
        height: 310px;
    }
    .overlay {
        position: absolute;
        width: 220px;
        height: 310px;
        background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 219, 112, 0.8) 45%,
        rgba(32, 50, 255, 0.6) 50%,
        transparent 54%);
        filter: brightness(1.2) opacity(0.8);
        mix-blend-mode: color-dodge;
        background-size: 150% 150%;
        background-position: 100%;
        transition: all 0.1s;
    }
    .card {
        width: 220px;
        height: 310px;
        background-image: url(images/3vx2.webp);
        background-size: cover;
    }
</style>

 

3. 광원 효과 적용 결과

 카드 이미지에 광원 효과를 주는 원리는 카드 이미지 위에 광원 이미지(overlay)를 투명하게 덮는 원리다.

position: absolute;:
이 속성은 .overlay 요소를 부모 요소(.container)를 기준으로 절대적인 위치에 배치합니다.
즉, .overlay는 .container 내부에서 자유롭게 이동하고 배치될 수 있습니다.

background: linear-gradient(105deg, transparent 40%, rgba(255, 219, 112, 0.8) 45%, rgba(32, 50, 255, 0.6) 50%, transparent 54%);:
이 속성은 .overlay에 선형 그라데이션 배경을 적용합니다.105deg는 그라데이션의 방향을 설정합니다.
transparent 40% : 투명한 색상이 40%지점까지 적용됩니다.

rgba(255, 219, 112, 0.8) 45% :
노란색에 가까운 색상이 45%지점까지 적용됩니다. alpha값이 0.8이기 때문에 약간 투명한 상태입니다.

rgba(32, 50, 255, 0.6) 50% : 파란색에 가까운 색상이 50%지점까지 적용됩니다.
alpha값이 0.6이기 때문에 약간 투명한 상태입니다.

transparent 54% : 투명한 색상이 54%지점까지 적용됩니다. 이러한 설정을 통해, .overlay는 특정 각도로 색상이 변화하는 빛나는 효과를 가지게 됩니다.

filter: brightness(1.2) opacity(0.8);:
brightness(1.2)는 요소의 밝기를 1.2배로 증가시켜 더 밝게 만듭니다.
opacity(0.8)은 요소의 투명도를 0.8로 설정하여 약간 투명하게 만듭니다.

mix-blend-mode: color-dodge;:
이 속성은 배경색과 요소의 색상을 혼합하는 방식을 설정합니다.
color-dodge는 밝은 색상을 더 밝게 만들고 어두운 색상은 거의 변화시키지 않아 빛나는 효과를 줍니다.

background-size: 150% 150%;:
배경 이미지(이 경우에는 그라데이션)의 크기를 요소의 크기보다 150% 크게 설정합니다.
이것은 그라데이션이 요소 안에서 움직이는 효과를 내는데 사용될수 있습니다.

background-position: 100%;:
배경 이미지의 초기 위치를 가로 방향으로 100% 위치에 설정합니다.

transition: all 0.1s;:
이 속성은 요소의 속성 변화에 0.1초의 전환 효과를 적용합니다.
즉, .overlay의 스타일이 변경될 때 부드러운 애니메이션 효과가 나타납니다.