도구스개발

CSS 3D 변환 행렬 계산기

translate3d·rotate3d·scale3d·perspective를 나열하면 CSS matrix3d()의 16개 값으로 합성해 계산합니다.

1번째 함수

deg

2번째 함수

deg

3번째 함수

정육면체를 변환한 결과입니다. 미리보기 전용 카메라(별도 perspective 값과 무관)로 원근감을 더했습니다.

합성 결과

matrix3d(0.766044, 0, -0.642788, 0, -0.219846, 0.939693, -0.262003, 0, 0.604023, 0.34202, 0.719846, 0, 0, 0, 0, 1)
원래 transform 값rotate3d(0, 1, 0, 40deg) rotate3d(1, 0, 0, -20deg)
matrix3d()의 16개 값은 열 우선(column-major)으로 나열됩니다 — 수학 교과서의 행 우선 표기와 반대입니다. 여러 함수를 나열하면 CSS는 왼쪽부터 새 좌표계를 만들어가는 방식으로 합성합니다(M = M₁·M₂·M₃, 점에는 가장 나중에 적힌 함수가 먼저 적용됩니다) — dev/css-transform-matrix(2D)와 같은 규칙입니다.
2D rotate(θ)는 rotate3d(0, 0, 1, θ)와 정확히 같습니다. 축(x,y,z)은 정규화해서 계산하므로 (1,0,0)이든 (2,0,0)이든 같은 회전을 냅니다.

사용 방법

  1. 1함수를 순서대로 최대 3개까지 고르고 값을 입력합니다.
  2. 2합성된 matrix3d() 값을 확인하고 복사합니다.
  3. 3와이어프레임 정육면체 미리보기로 변환 결과를 눈으로 확인합니다.

자주 묻는 질문

그 계산기는 2D 변환(matrix())만 다룹니다. 이 계산기는 z축까지 포함한 3D 변환(matrix3d())을 다룹니다 — translate3d·scale3d는 값이 하나씩 늘어나는 정도지만, rotate3d는 임의의 축 둘레로 도는 회전이라 로드리게스 공식이 필요하고, perspective는 원근감을 만드는 완전히 새로운 개념입니다.

CSS 스펙은 4×4 행렬을 "열 우선(column-major)"으로 나열하도록 정합니다 — 수학 교과서에서 흔히 쓰는 행 우선(row-major)과 반대입니다. 이 순서를 헷갈리면 회전 방향이 뒤집히는 등 미묘하게 틀린 결과가 나옵니다. 이 계산기가 그 변환을 대신 해 줍니다.

네. CSS 표준은 "2D rotate(θ)는 rotate3d(0,0,1,θ)와 같다"고 정의합니다. 이 계산기의 로드리게스 공식으로 축을 (0,0,1)로 두면 dev/css-transform-matrix의 2D 회전 행렬과 정확히 같은 값이 나오는 것을 테스트로 확인했습니다.

z축 방향의 깊이감을 화면에 투영하는 원근 변환입니다. 값(d)이 작을수록 원근 왜곡이 강해지고, 값이 매우 크면 원근감이 거의 사라집니다(z를 무시하는 것과 비슷해집니다).

전송되지 않습니다. 모든 계산은 브라우저 안에서 이뤄지고, 입력값은 이 기기에만 남습니다.

알아두면 좋은 점

  • matrix3d()의 열 우선 순서, rotate3d의 로드리게스 회전 공식, perspective()의 정의는 W3C "CSS Transforms Module Level 2"와 MDN 문서가 동일하게 설명합니다(WebSearch 교차 확인, 2026-09-05).
  • 핵심 계산은 src/lib/calc/cssTransform3d.ts에 있으며, dev/css-transform-matrix(2D)와 같은 합성 순서 규칙(transform: A B C → 점에는 오른쪽부터 적용)을 그대로 따릅니다.

함께 보면 좋은 도구

CSS matrix() 계산기translate·rotate·scale·skew 값을 입력하면 CSS matrix() 합성 행렬과 미리보기를 계산합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.2-SAT「둘 중 하나는 참」인 조건을 여럿 넣으면 참·거짓 배정이 가능한지 판정하고 배정을 하나 찾아 줍니다.2의 보수 변환N비트 폭에서 정수를 2의 보수 이진 표현으로 바꿔 줍니다.

마지막 검증: 2026년 9월 5일 · 결과는 참고용 추정치입니다.