도구스개발

CSS 트랜스폼 행렬 계산기

translate·rotate·scale·skew 값을 입력하면 CSS matrix() 합성 행렬과 미리보기를 계산합니다.

1번째 함수

px
px

2번째 함수

deg

3번째 함수

점선 사각형이 원래 모양, 채워진 사각형이 변환 후 모양입니다.

합성 결과

matrix(0.866025, 0.5, -0.5, 0.866025, 60, 20)
원래 transform 값translate(60px, 20px) rotate(30deg)
a0.866025
b0.5
c-0.5
d0.866025
e (tx)60
f (ty)20
matrix(a, b, c, d, e, f)는 | a c e ; b d f ; 0 0 1 | 행렬입니다. 여러 함수를 나열하면 CSS는 왼쪽부터 새 좌표계를 만들어가는 방식으로 합성합니다 — 행렬로는 나열한 순서 그대로 곱하고 (M = M₁·M₂·M₃), 점에는 가장 나중에(오른쪽에) 적힌 함수가 먼저 적용됩니다. 순서를 바꾸면 결과가 달라집니다(교환법칙이 성립하지 않습니다).
이 계산기는 2D 변환(matrix())만 다룹니다. matrix3d()로 표현하는 3D 변환(perspective, 임의 축 회전 등)은 다루지 않습니다.

사용 방법

  1. 1최대 3개의 함수(translate·scale·rotate·skewX·skewY)와 값을 순서대로 입력합니다.
  2. 2미리보기에서 변환 전후 사각형 모양을 확인합니다.
  3. 3matrix() 결과를 복사해 그대로 CSS에 붙여넣습니다.

자주 묻는 질문

a c e / b d f / 0 0 1 순서의 2×3 아핀 변환 행렬입니다. translate·scale·rotate·skew를 이 여섯 개 숫자 하나로 합쳐 표현합니다.

CSS는 transform에 나열한 순서 그대로(왼쪽부터) 새 좌표계를 만들어가며 합성합니다. 행렬로는 나열한 순서 그대로 곱하지만, 점에는 가장 나중에(오른쪽에) 적힌 함수가 먼저 적용됩니다. 순서를 바꾸면 결과가 달라집니다.

CSS 좌표계는 Y축이 아래로 향합니다. 수학에서 익숙한 반시계 방향 회전 공식을 그대로 쓰면 화면에서는 시계 방향으로 보입니다.

아니요. 이 계산기는 2D 변환(matrix())만 다룹니다. matrix3d()는 값 배치와 회전 공식이 훨씬 복잡해 범위 밖입니다.

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

알아두면 좋은 점

  • 이 계산기는 2D 변환(matrix())만 다룹니다. perspective·3D 회전 등은 포함하지 않습니다.

함께 보면 좋은 도구

clamp() 생성기뷰포트 너비 구간과 그때의 최소·최대 값을 입력하면 반응형 폰트 크기·여백에 쓸 CSS clamp() 코드를 생성합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.2-SAT「둘 중 하나는 참」인 조건을 여럿 넣으면 참·거짓 배정이 가능한지 판정하고 배정을 하나 찾아 줍니다.2의 보수 변환N비트 폭에서 정수를 2의 보수 이진 표현으로 바꿔 줍니다.

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