바로 쿠팡 취업가능한 포트폴리오 만들기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보 웹 개발자와 포트폴리오 제작 초보자
• CSS 애니메이션 및 JavaScript 인터랙션 기초 이해 수준

핵심 요약

• CSS로 생성한 overlay 효과 (linear-gradient, mix-blend-mode)를 활용한 3D 카드 애니메이션 구현
• JavaScript로 마우스 이벤트 (mousemove, mouseout) 처리하여 카드 회전 및 빛 반사 효과 동적으로 제어
• transform: perspective()와 rotateX/Y를 통해 입체적인 3D 회전 효과 적용

섹션별 세부 요약

1. HTML 구조 구성

• .container와 .overlay 클래스를 가진 div 요소 생성
• width: 220px; height: 310px;로 카드 크기 정의
• position: relative;로 overlay가 절대 위치로 배치 가능하도록 설정

2. CSS 애니메이션 설정

• .overlay에 linear-gradient(105deg, transparent 40%, rgba(...) 45%) 적용하여 점진적 색 변화 효과 생성
• filter: brightness(1.1) opacity(0.8);로 밝기 및 투명도 조절, mix-blend-mode: color-dodge로 이미지와 색 혼합
• background-size: 150% 150%;로 배경 확대 및 transition: all 0.1s로 부드러운 애니메이션 구현

3. JavaScript 인터랙션 처리

• container.addEventListener('mousemove', function(e) {...})로 마우스 위치 추적
• e.offsetX, e.offsetY로 마우스와 카드 간 거리 계산
• rotateY = -1/5 x + 20; rotateX = 4/30 y - 20;로 회전 각도 계산
• overlay.style = 'background-position: ...%; filter: ...'로 빛 반사 효과 동적 조절
• container.style = 'transform: perspective(350px) rotateX/Y(...deg)'로 3D 회전 적용
• mouseout 이벤트로 기본 상태로 복귀

결론

• CSS 애니메이션과 JavaScript 인터랙션 결합하여 시각적 효과 강화
• perspective(350px)는 입체감 강조에 필수, transition은 부드러운 효과 생성
• 포트폴리오에 적용 시 3D 카드 컴포넌트로 디자인 역량을 효과적으로 전달 가능