색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS 2D·3D 변환 생성기
이동, 회전, 크기, 기울기와 변환 기준점을 조절하고 필요에 따라 원근감과 3D 변환을 더합니다.
3D 옵션
미리보기
점선은 원래 위치입니다. 변형 순서에 따라 결과가 달라지며, 내보낸 CSS는 미리보기와 같은 순서를 사용합니다.
CSS
도구 소개
요소를 배치하거나 기울이며 원래 윤곽과 비교할 수 있습니다.
사용 방법
X·Y 이동, 회전, 두 축의 크기와 기울기, 변환 기준점을 조절하며 원래 윤곽과 비교하세요. 3D를 켜면 원근 거리, Z 이동과 X·Y 회전도 설정할 수 있습니다. transform과 transform-origin 선언을 함께 복사하거나 다운로드합니다.
미리보기와 출력은 같은 값과 고정된 변환 순서를 사용합니다. 함수 순서를 바꾸면 결과가 달라질 수 있습니다. 음수 배율은 뒤집기이고 0은 해당 축을 접어 보이지 않게 합니다. 요소 스타일을 만드는 도구이며 3D 모델이나 완성된 애니메이션을 생성하지 않습니다.
자주 묻는 질문
변환 함수 순서를 바꿔도 같은 결과인가요?
순서를 바꾸려면 내보낸 CSS를 직접 편집하세요. 화면에는 함수 순서를 바꾸는 기능이 없습니다. 미리보기와 출력은 같은 고정 순서를 사용하며 순서에 따라 결과가 달라집니다. 음수 배율은 축을 뒤집고 0은 해당 축을 납작하게 만듭니다.
이동하거나 크기를 바꾼 요소의 원래 공간이 남는 이유는 무엇인가요?
CSS transform은 그려지는 모습만 바꾸며 원래 레이아웃 박스는 이동하지 않습니다. 주변 콘텐츠도 원래 위치를 기준으로 배치됩니다. 간격은 일반 레이아웃 규칙으로 조절하고, 시각적 변환의 기준점은 transform-origin으로 정하세요.
관련 도구
새 탭에서 열립니다
댓글
0