변환속성 - backface-visibility

컴공 윤서혜 학습일기 2021. 1. 12. 18:16

3D 변환으로 회전된 요소의 뒷면 숨김을 설정

값	의미	기본값
visible	뒷면 숨기지 않음	visible
hidden	뒷면 숨김

img{
  width: 300px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: perspective(400px)
    rotateY(180deg);
}

이렇게 뒤집힌 상태에서 hidden을 추가하면 이미지는 사라지게 된다. 하지만 뒤집히지 않는 상태에서는 그대로 있다.

*hidden을 사용 주의사항

img{
  width: 300px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: perspective(400px)
    rotateY(180deg);
  backface-visibility: hidden;
}

rotateY축이 180가 된것처럼 반대로 뒤집힌 경우에는 이미지가 사라지지만, 뒤집히지 않는 경우에는 이미지가 사라지지 않는다.

img{
  width: 300px;
  border: 1px solid lightgray;
  transition: 1s;
  transform: perspective(400px);
  backface-visibility: hidden;
}