[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 공간에서 적용됩니다.

 




 
 

[Pop Up Book] 전체 좌표와 translate3d 계산 그림

 책을 두 개로 쪼개는 것처럼 앞면 뒷면을 그룹으로 구분해준다. (이래야 애니메이션 적용이 편하다) 그리고 책이 완전히 펴지는데 Transform을 이용하면서 계산을 해야한다. 대략적인 계산은 연습장에 계산해가면서 스타일 속성값을 할당해야 하지만 조금씩 어긋나는 것들은 요소검사에서 스타일 속성을 수정해가면서 진행하는 편이 낫다.