변환속성 - transform-style

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

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

 

 

.perspective{
  width: 200px;
  perspective: 500px;
  padding: 70px;
}

.grand-parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateX(-45deg);
}

.parent{
  width: 200px;
  border: 3px solid blue;
  transition: 1s;
  transform: rotateY(45deg);
}

img{
  width: 200px;
}

grand-parent클래스에서 자식요소가 3D로 변환할건지 설정을 안했기 때문에 오류가 난다. 그러므로 grand-parent클래스에서 transform-style: preserve-3d를 넣어줘야한다.

 

 

.perspective{
  width: 200px;
  perspective: 500px;
  padding: 70px;
}

.grand-parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
}

.parent{
  width: 200px;
  border: 3px solid blue;
  transition: 1s;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

img{
  width: 200px;
  border: 3px solid lightgray;
  transition: 1s;
  transform: rotateX(45deg);
}

3D 효과

즉, 자식요소가 3D 효과를 보려면 부모 요소에서 transform-style: preserve-3d; 를 입력해줘야한다.