캐릭터 초기위치 와 이동을 `style.left` 대신 `translateX` 로 해보려는데 어렵네요..

ㅠㅠ 질문하기 몇일 전부터 쭉 고민하다 내린결론인데요,
transform 자체가 2D 기반 API 라서 그런지 에서 3D 공간 구성을 위한 표현자체가 한계가 많은것 같습니다.

제가 근 몇일간 가장 혼란스러웠던 부분은..


첫번째
- rotate 시 좌표축까지 회전됨

그래픽카드 가속력 지원을 받기위해 left top right bottom 없이 translate 만 가지고 적용을 해보다 알았는데요,
rotate -90 deg 를 적용하면, 좌표축 까지 돌아가버려서
translateX( ? ) 를 적용하려면
돌아가버린 축때문에, 대상이 Z 축으로 이동을 하더군요..
 돌아간 축에 따라 이것을 다시 if 분기로 나눠서 translateXYZ 로 각각 값적용을 하려고 했으나,
이방법 또한 적절한 방법인지 고민이 되었습니다.

두번째
- translateXYZ 로 이동 후, rotate 되면, 그자리에서 rotate 되지않고, 
translate3D(0, 0, 0) 을 기준으로 회전을 해서 대상이 화면에서 사라집니다.

즉, left 나 top 같은 속성으로만 좌표이동이 가능하단 것입니다.
또한 z 축으로 이동하려면 위의 "첫번째" 처럼 rotate 가 된 상태로 x 축을 이동하면 되나,
기준축이 이동하는것이 아니기 때문에, left 나 top 을 이용해야 합니다.
때문에, 이방법 또한 3D 가속을 지원받지 못해 적절하지 않습니다.

Canvas 기반이 아닌상태에서 3D 공간구현을 제대로 하려면
3D Matrix 4x4 행렬데이터를 기반하여 적용이 되어야 하는 결론에 다달았습니다.
이것을 파려니 시간적인 소요가 너무 심해 단순히 끝내려고 예제와 같은 left 속성으로 이동값을 적용후 마무리 지었습니다.

혹시 틀린 부분이 있다면, 조언 부탁드려도 될까요?
그리고 혹시 첫 질문에 해결 힌트를 얻을 수 있었으면 좋을것같아요.