ans [trænsˈfɔ : m] 美 [trænsˈfɔ : rm]
vt.change;
n. 스타일; 악기, 취향
vt. 디자인, 모양...
vi.
CSS 변환 스타일 속성 통사론
기능: transform-style 속성은 3D 공간에서 중첩된 요소를 렌더링하는 방법을 지정합니다.
구문: transform-style: flat|preserve-3d
설명: 플랫 하위 요소는 3D 위치를 유지하지 않습니다. Preserve-3d 하위 요소는 3D 위치를 유지합니다.
참고: 이 속성은 변환 속성과 함께 사용해야 합니다.
CSS 변환 스타일 속성 예
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
#div3
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(80deg);
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요