목차
- transform-style 예제 - 변형된 자식요소의 3D 위치 유지 O
- transform-style 정의
- transform-style 구문
- 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>
결과보기