CSS transform 생성기
이동, 확대/축소, 회전, 기울기 값을 조정해 CSS transform 코드를 생성합니다.
이 도구에 대해
translate, scale, rotate, skew 값을 한 화면에서 조정하고 실제 요소가 어떻게 변하는지 확인합니다.
마이크로 인터랙션, 카드 hover, 배너 장식, 모션 시작 상태를 빠르게 만들 때 유용합니다.
미리보기
결과
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›hover나 focus 상태에 넣을 transform 값을 만듭니다.
- ›움직임의 기준점인 transform-origin 값을 함께 확인합니다.
- ›프로토타입에 넣을 이동, 회전, 기울기 코드를 빠르게 복사합니다.