본문 바로가기
CSS/CSS3

CSS3 엘리먼트 변형 3D (Transform 3D)

by 샷타이거 2012. 3. 5.

CSS3 엘리먼트 변형 3D (Transform 3D)

3D엘리먼트를 둘러보자 먼저 믿기지않을 정도의 예제를 보자. IE, 오페라는 지원하지 않는다. 변형을 이용한 CSS3만으로 만들어진 애니메이션
http://sianasiatiger.cafe24.com/study/css3butterfly/butterfly.html

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

3D를 생각하면 y축이 더해진것이다.
하나하나 설명하기보다 아래 데모로 테스트 해보는것이 이해하기쉬울것이다. 단 그전에
perspective를 알아야 한다 즉 원근법인데 아래 그림을 참조하자

perspective를 설정하여 두 엘리먼트 사이의 입체간격을 지정한다.perspective-orgin은 2D 변형에서 살펴본것과 같이 중심점이다. 중심점에서 얼마만큼 떨어지냐를 정한다. 값은 flat과 preserve-3d로 두가지가있다 flat은 부모공간과 평평하게 놓는것이고, preserve-3d는 3d에서 독립적인것이다

위의 것들을 일일이 예제로 들기보다 직접 이 툴로 어떤것들을 표현 할 수 있는지 확인 해보는것이 편할듯하다.
웹킷기반 브라우저로만 확인가능하다.
이 툴에서 안에 있는 태양그림을 포함하는 것이 #inner이고 바깥이 #outer이다 (그림을 클릭하면 된다)
http://sianasiatiger.cafe24.com/study/css3dexplorer/css3dexplorer.html

위와같이 만들어본 것 소스는 다음과 같다.

<div id="outer>
 <div id="inner">생략</div>
</div>
#inner{-webkit-transform: 
                   perspective(275)
                   translate3d(16px, 30px, 59px)
                   scale3d(1.35, 1.25, 1.5)
                   rotate3d(23, 18, 41, 21deg);
       -webkit-transform-origin: 50% 50% 50%;
       -webkit-transform-style: preserve-3d;
      }

더욱 많은 예제를 보고싶다면 여기로 http://ugpapa.tistory.com/271


댓글