CSS) 변환속성 - transform-style

1) transform-style

3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정

속성 값

값	의미	기본값
flat	자식 요소의 3D 변환을 사용하지 않음	flat
preserve-3d	자식 요소의 3D 변환을 사용함

 

사용법

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <img
src="https://heropy.blog/css/images/logo.png"
alt="HEROPY">
    </div>
  </div>
</div>

.perspective {
  width: 200px;
  perspective:500px;
  padding: 70px;
}
.grand-parent {
  width: 200px;
  border: 3px solid dodgerblue;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
/*   transform-style: flat; */
}
.parent {
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}
img {
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

※ 부모요소에서 transform-style: preserve-3d;를 설정해주지 않으면 자식요소는 transform이 정상적으로 동작하지 않는다.
또한 부모요소에서 자식의 자식으로 설정이 되지 않기 때문에 각 부모와 자식 사이에 transform-style: perserve-3d가 설정되어야 한다.