CSS3 3D Transforms Module Example
W3C CSS 3D Transforms Module Level 3(working draft) 예제입니다. 스펙이 완성되지 않아서 제조사 접두어(-moz, -o-, -webkit-, -ms-)를 사용하였습니다. 많은 부분이 CSS3 2D 트랜스폼과 겹치기 떄문에 차이가 있는 부분만 정리하였습니다.
transform-style
하위에 포함된 요소들을 평평하게 보여줄지 입체로 보여줄지를 제어합니다. 'flat'을 지정할 경우 하위요소들은 모두 상위 요소의 2D 표면에 그려지게 되고 'preserve-3d'를 지정할 경우 실제 3D 형체를 유지합니다.
.example div {
trasform: rotateX(90deg) translateZ(-16px);
transform-style: flat;
}
.example div div {
trasform: rotateZ(45deg) translateZ(32px);
}2D인 rotateZ는 적용되었지만 translateZ는 적용되지 않았습니다.
.example div {
trasform: rotateX(90deg) translateZ(-16px);
transform-style: preserve-3d;
}
.example div div {
trasform: rotateZ(45deg) translateZ(32px);
}자식요소의 translateZ도 적용되었습니다.
perspective
원근감을 제어합니다. 값이 작을 수록 가까이에서 보는 것 같이 느껴지고 3D 효과도 커집니다. perspect() 함수를 이용해서 transform 속성에 지정할 수도 있고 perspect 속성을 이용해서 부모요소에 지정할 수도 있습니다. 부모요소에 지정할 경우 자식요소들이 동일한 소실점을 갖습니다.
.example {
perspective: 32px;
}.example {
perspective: 64px;
}.example {
perspective: 128px;
}perspective-origin
소실점의 위치를 제어합니다.
.example {
perspective-origin: 50% 0;
}.example {
perspective-origin: 50% 50%; /* default value */
}.example {
perspective-origin: 50% 100%;
}backface-visibility
뒤집혔을 때 뒷면이 보이게 할지를 제어합니다.
.example div {
background-color: #eee;
transform: rotateY(120deg);
backface-visibility: visible; /* default value */
}.example div {
background-color: #eee;
transform: rotateY(120deg);
backface-visibility: hidden;
}90도가 넘게 뒤집혔기 때문에 보이지 않습니다.