카드 홀로그램 효과

홀로그램 효과를 만들어봅니다.
container 라는 이름으로 카드 모양의 박스를 만들어봅니다.

html

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

css

/* 컨테이너 스타일 */
.container {
    width: 220px;
    height: 310px;
    transition: all 0.1s;
    position: relative; /* 상대적인 위치 설정 */
}

/* 오버레이 스타일 */
.overlay {
    position: absolute; /* 절대적인 위치 설정 */
    width: 200px;
    height: 310px;
    
    background: linear-gradient(
    105deg, /* 그라데이션 각도 */
    transparent 30%, /* 시작 부분: 투명 */
    rgba(255, 219, 112, 0.8) 45%, /* 그라데이션 색상 중간 부분: 노란색 투명도 0.8 (30%에서 45%까지) */
    rgba(132, 50, 255, 0.6) 50%, /* 그라데이션 색상 끝 부분: 보라색 투명도 0.6 (50%에서 54%까지) */
    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(mew.png);
    background-size: cover;
}

JS를 이용하여마우스 위치를 기반으로 회전 효과를 줍니다.

Javascript

// DOM에서 컨테이너와 오버레이 엘리먼트를 찾습니다.
    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.backgroundPosition = `${x / 5 + y / 5}%`;

        // 오버레이의 밝기와 투명도를 조정하여 가시성을 높입니다.
        overlay.style.filter = 'brightness(1.2) opacity(1)';

        // 컨테이너를 회전시켜 입체적인 효과를 줍니다.
        container.style.transform = `perspective(350px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });

    // 마우스가 컨테이너를 벗어났을 때의 이벤트에 대한 리스너를 추가합니다.
    container.addEventListener('mouseleave', function() {
        // 오버레이의 밝기와 투명도를 초기값으로 돌려놓아 가시성을 줄입니다.
        overlay.style.filter = 'brightness(1.2) opacity(0)';

        // 컨테이너를 초기 회전값으로 되돌립니다.
        container.style.transform = 'perspective(350px) rotateX(0deg) rotateY(0deg)';
    });

css를 이용하여 다양한 홀로그램 효과를 줄 수 있습니다.