CSS/CSS3

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

샷타이거 2012. 3. 5. 17:23

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


저작자표시