CSS 변환 실험실
범위가 있는 여섯 숫자 입력으로 같은 CSS transform 선언을 로컬에서 미리 보고 복사하세요.
CSS 변환 실험실
이동 −500~500 px, 회전 −360~360도, 균일 배율 0~5, 두 기울기 −80~80도입니다. 빈칸이 아닌 유한한 숫자가 필요하며 소수를 허용합니다. 배율0은 카드를 축소하여 사라지게 합니다. 잘못된 입력은 카드를 숨기고 이전 CSS를 지우며 복사를 비활성화합니다.
선언 순서는 translate, rotate, scale, skewX, skewY입니다. CSS 합성에서는 점에 가장 오른쪽 함수가 먼저 적용됩니다. 변환 원점은 100 × 100 CSS 픽셀 카드의 중심입니다. 별도의 수학 도표는 계산하지 않습니다. 브라우저가 제한된 영역에 2차원 CSS를 렌더링하며 영역 밖 내용은 잘립니다. 3차원 변환, 원근, 함수 순서 변경 또는 물리 측정은 없습니다. 입력을 업로드하지 않습니다.
사용 방법
사용 방법
- 수평·수직 이동, 회전, 균일 배율과 수평·수직 기울기를 설정하세요.
- 2차원 미리보기와 CSS 선언을 확인하세요.
- 선언을 복사하거나 모든 입력을 초기화하세요.
고정 선언 순서
선언 순서는 translate, rotate, scale, skewX, skewY입니다. CSS 합성에서는 점에 가장 오른쪽 함수가 먼저 적용됩니다. 변환 원점은 100 × 100 CSS 픽셀 카드의 중심입니다. 별도의 수학 도표는 계산하지 않습니다.
유한한 숫자 범위
이동 −500~500 px, 회전 −360~360도, 균일 배율 0~5, 두 기울기 −80~80도입니다. 빈칸이 아닌 유한한 숫자가 필요하며 소수를 허용합니다. 배율0은 카드를 축소하여 사라지게 합니다. 잘못된 입력은 카드를 숨기고 이전 CSS를 지우며 복사를 비활성화합니다.
미리보기 범위
브라우저가 제한된 영역에 2차원 CSS를 렌더링하며 영역 밖 내용은 잘립니다. 3차원 변환, 원근, 함수 순서 변경 또는 물리 측정은 없습니다. 입력을 업로드하지 않습니다.
자주 묻는 질문
더 알아보기
함수 순서를 바꿀 수 있나요?
아니요. 선언 순서는 고정이며 미리보기와 복사한 CSS가 같은 순서를 사용합니다.
카드가 왜 사라지나요?
배율0으로 줄어들거나 큰 변환으로 잘린 영역 밖으로 이동하거나 잘못된 입력 때문에 숨겨집니다.