CSS 변형(transform) 생성기

CSS transform 속성은 페이지 레이아웃을 건드리지 않고 요소를 옮기고, 돌리고, 확대·축소하고, 기울입니다. 대부분의 호버 효과와 애니메이션의 바탕이 되는 속성입니다. 함수의 순서가 중요하고 합쳐진 효과를 머릿속에 그리기 어렵기 때문에, 이 생성기는 값을 항목별 컨트롤로 만들고, 순서와 기준점을 고르게 하며, 원래 상자와 비교해 결과를 미리 보여 주고, 같은 효과의 matrix() 또는 matrix3d() 하나를 알려 줍니다.

사용 방법

1. translate, rotate, scale, skew를 설정하고, 3D가 필요하면 rotateX/rotateY와 perspective를 더합니다.
2. 함수의 순서와 transform-origin을 고릅니다.
3. 미리보기에서 파란 상자를 점선 원본과 비교합니다.
4. CSS를 복사하거나, 스크립트나 애니메이션에서 값 하나가 필요하면 matrix를 복사합니다.

계산식

translate(e, f) = [1 0 e; 0 1 f] · rotate(θ) = [cos θ −sin θ; sin θ cos θ] · scale(x, y) = [x 0; 0 y] · skew(α, β) = [1 tan α; tan β 1] · M = M₁ × M₂ × … in the written order

matrix(a, b, c, d, e, f)는 3 × 3 행렬 [a c e; b d f; 0 0 1]을 나타냅니다. 3D에서는 4 × 4 행렬을 곱하며, perspective(d)는 맨 아래 행에 −1/d를 넣습니다. 모든 함수는 transform-origin을 중심으로 작용합니다.

예시

translate(10px, 20px) rotate(90deg)는 [1 0 10; 0 1 20]에 [0 −1 0; 1 0 0]을 곱해 matrix(0, 1, −1, 0, 10, 20)이 됩니다. 요소는 시계 방향으로 90도 돌고 오른쪽으로 10 px, 아래로 20 px 이동합니다. 반대로 rotate(90deg) translate(10px)라고 쓰면 matrix(0, 1, −1, 0, 0, 10)이 됩니다. 10 px 이동이 이제 돌아간 축, 즉 아래쪽을 따라 일어납니다.