변환속성 - backface-visibility

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

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

 

 

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

Y축으로 180도 뒤집힘

이렇게 뒤집힌 상태에서 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;
}

없어지지않는 이미지