CSS) 변환속성 - backface-visibility

1) backface-visibility

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

속성 값

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

 

사용법

<img class="img1"src="https://heropy.blog/css/images/logo.png" alt="HEROPY">
<img class="img2" src="https://heropy.blog/css/images/logo.png" alt="HEROPY">

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

※ backface-visibility를 보면 좌측img1은 visible로 보여지지만, 우측img2는 hidden으로 보여지지 않는다.