[css] 카드 뒤집기, 이미지 앞뒤 회전 3d 애니메이션 효과 CSS를 이용한 3차원 애니메이션 효과 설정입니다. 구현 내용 이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서 이미지의 뒷면이 출력되고, 이미지에서 마우스를 내리면 다시 원래 이미지로 회전하면서 다시 앞면 이미지가 나오게 됩니다. 카드 뒤집기와 같이 이미지를 앞면, 뒷면을 교차적으로 출력하면서 3차원의 애니메이션 효과를 css를 통하여 구현할 수 있습니다. css로 3차원 애니메이션 효과 기본 동작 html 앞면(이미지 앞면) 뒷면(이미지 뒷면) css body { padding: 30px; } .container { width: 150px; height: 200px; perspective: 300px; //부모의 자식 요소가 3차원의 애니메이션 효과를 가질때, 300px의 거리에서 보는.. 이전 1 다음 반응형
