[CSS] 이미지의 Z축 (깊이) 조절하기

위 움짤처럼 오른쪽에서 왼쪽으로 자동으로 슬라이딩하는 캐러셀을 만들고 마우스 커서 hover 시 transform: translateZ()를 사용한 깊이 조절로 크기를 조절해본다.

HTML구조

CSS

translateZ()는 부모요소에 perspective를 적용해줘야 잘 작동한다.

.container {
	perspective: 100px;
}

.box:hover {
	transform: translateZ(20px);
}

잘 작동하는 걸 확인할 수 있다.

결론: transform: translateZ() 사용하려면 부모요소에 perspective 속성을 주자.