[오류 해결] backface-visibility: hidden

 

프로젝트 갤러리 부분 3d 카드에서 "backface-visibility: hidden"이 갑자기 안 먹었다.

 

img 태그는 잘 되는데, span태그랑 p태그가 갑자기 카드를 안 뒤집어도 보이기 시작했다.

 

잘 되던 게 갑자기 안 되어서 너무 황당했는데, 구글 찾아보니 크롬 버그라는 말도 있고, 확실한 이유는 잘 모르겠다.

 

어쨌든 구글 열심히 찾아서 이 코드, 저 코드 다 넣어봤는데, 계속 실패하다가

 

전체에 "backface-visibility: hidden" 주고, 부모한테 "transform: translateY(0)" 넣으라는 거 참고해서

 

카드 전체에 hidden 주고

.galleryCard > * {
  backface-visibility: hidden;
}

 

 

부모 부분을 아래처럼 수정했더니

/* backface-visibility: hidden; */
/* transform: translate(-50%, -50%) translateZ(100px); */
transform: translate(-50%, -50%);

 

다시 카드 뒤집기 전에 글자 안 보이기 시작했다.

 

해결되어서 진짜 다행이다....