[CSS3] Translate3d 에 대하여..

W3School 에 Translate3d 속성에 대한 자세한 설명을 발견 못 해서 이렇게 정리합니다 :)

참조 : https://developer.mozilla.org/en-US/docs/CSS/transform-function#translate3d()
http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

요약 : Translate3d 는 기존 Translate 에서 공간이 하나 더 추가된 CSS 이다.

 translate3d(tx, ty, tz) CSS 는 엘리멘트를 3D 공간에서 움직이게끔 하는 기능을 갖고 있습니다. 따라서 2D 공간에서 사용했던translate(tx, ty)나 top, left 속성과는 공간개념의 차이가 가장 큽니다.
 3D 공간에서 엘리멘트를 변형할 때는 Matrix3d() 를 사용합니다.

| 1 0 0 tx |             | 1 0 0  0 |
| 0 1 0 ty |             | 0 1 0  0 |
| 0 0 1 tz |             | 0 0 1  0 |
| 0 0 0  1 |   혹은    |tx ty tz 1 |

  위는 Matrix3d 의 기본 형태입니다. tx, ty, tz 는 엘리멘트를 다른 곳으로 옮기는 길이 값을 지닙니다. 그리고 나머지 요소들은 엘리멘트의 모양을 변형할 때 적용되는 값을 지닙니다. 다른 곳으로 옮긴다는 말은 top 과 left 속성을 떠올리고, 모양을 변형한 다는 말은 rotate 나 scale 을 생각하면 쉽게 감이 올 것 같습니다.

Matrix3d 를 쉽게 이해하기 위해서는 아래 링크에 접속하세요.
http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html?iframe=true&width=720&height=640

 참고사항으로는 translate(tx, ty) 의 경우는 Matrix() 를 사용합니다.
 
| 1 0 tx |            | 1  0  0 |
| 0 1 ty |            | 0  1  0 |
| 0 0 1  |   혹은   |tx ty  1 |

 2차원 평면에서만 적용되므로 tx, ty 로 엘리멘트를 옮기고 나머지 요소들로 엘리멘트를 변형시킵니다. translate() 에서 파생된 CSS 로는 translateX 와 translateY 가 있습니다. 이 둘은 평면 상에서 사용되고 또한 3D 공간에도 적용됩니다. 반면에 translateZ 는 translate3d 에서 파생되었습니다. 이는 평면에서 적용이 안 되고 3D 공간에서 적용됩니다.