[transform] CSS - transform-style 속성 - 중첩요소를 3D공간에서 표시 방법 (= transform-style속성 = 트랜스폼스타일속성)

1. transform-style 예제 - 변형된 자식요소의 3D 위치 유지 O
2. transform-style 정의
3. transform-style 구문
4. transform-style 예제 - 변형된 자식요소의 3D 위치 유지 X

transform-style 예제 - 변형된 자식요소의 3D 위치 유지 O

 

<style>

#box {

  position: relative;

  height: 200px;

  width: 200px;

  margin: 100px;

  padding: 10px;

  border: 1px solid black;

}

#hz {

  padding: 50px;

  position: absolute;

  border: 1px solid black;

  background-color: tomato;

  transform: rotateY(60deg);

  transform-style: preserve-3d;

}

#en{

  padding: 40px;

  position: absolute;

  border: 1px solid black;

  background-color: yellow;

  transform: rotateY(-60deg);

}

</style>

<div id="box">

  <div id="hz">홈짱닷컴 <div id="en">Homzzang.com</div></div>

</div>

 

결과보기

transform-style 정의

 

중첩된 요소가 3D 공간에서 렌더링되는 방식 지정.

 

---

 

1.

transform 속성과 함게 사용.

 

2.

기본값: flat

상속여부: X

애니효과: X

CSS버전: CSS3

JS구문: object.style.transformStyle="preserve-3d"

 

3.

IE 제외한 주요 최신 브라우저 지원.

 

transform-style 구문

 

selector {transform-style: flat|preserve-3d|initial|inherit;}

 

---

[속성값]

 

flat

자식요소가 3D 위치 유지 X. (기본값)

preserve-3d

자식요소가 3D 위치 유지 O.

initial

이 속성의 기본값으로 설정.

inherit

부모요소의 속성값 상속.

 

transform-style 예제 - 변형된 자식요소의 3D 위치 유지 X

 

<style>

#box {

  position: relative;

  height: 200px;

  width: 200px;

  margin: 100px;

  padding: 10px;

  border: 1px solid black;

}

#hz {

  padding: 50px;

  position: absolute;

  border: 1px solid black;

  background-color: tomato;

  transform: rotateY(60deg);

  transform-style: flat;

}

#en{

  padding: 40px;

  position: absolute;

  border: 1px solid black;

  background-color: yellow;

  transform: rotateY(-60deg);

}

</style>

<div id="box">

  <div id="hz">홈짱닷컴 <div id="en">Homzzang.com</div></div>

</div>

 

결과보기