CSS 도구/CSS 변환 생성기
CSS 변환 생성기
이동, 회전, 크기 조절, 기울이기 컨트롤로 CSS 변환을 시각적으로 생성
변환 컨트롤
이동
0px
0px
회전
0°
크기
1.0
1.0
1.0
기울기
0°
0°
프리셋
미리보기
요소
점선 테두리는 원래 위치를 표시합니다
CSS 코드
css
Loading...CSS 변환 가이드
CSS 변환과 시각 효과 만드는 방법 알아보기
CSS Transform이란?
CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절, 기울여서 시각적 표현을 수정할 수 있습니다. 변환은 문서 흐름에 영향을 주지 않습니다 - 변환된 요소가 시각적으로 이동하는 동안 다른 요소는 제자리에 유지됩니다.
변환 함수
- translate(): 요소를 수평 및 수직으로 이동
- rotate(): 중심점을 기준으로 요소 회전
- scale(): 요소 크기 증가 또는 감소
- skew(): X축과 Y축을 따라 요소 기울이기
사용 방법
- 이동 컨트롤을 사용하여 요소 이동
- 회전을 조정하여 요소 회전
- 크기를 조절하여 요소 리사이즈
- 원근감 변환을 위해 3D 모드 활성화
팁
- 복잡한 효과를 위해 여러 변환 결합
- transform-origin을 사용하여 피벗 포인트 변경
- 3D 변환은 부모 요소에 perspective가 필요
자주 묻는 질문
translate와 position의 차이점은?
translate는 문서 흐름에 영향을 주지 않고 요소를 시각적으로 이동합니다 - 다른 요소는 제자리에 유지됩니다. position(relative, absolute)은 레이아웃과 형제 요소에 영향을 줄 수 있습니다. translate는 GPU 가속이 되어 애니메이션에 더 적합합니다.
변환 원점을 어떻게 변경하나요?
transform-origin 속성을 사용하여 피벗 포인트를 설정합니다. 기본값은 'center center'입니다. 키워드(top, left, center, right, bottom), 퍼센트, 또는 픽셀 값을 사용할 수 있습니다. 예: 'transform-origin: top left'는 왼쪽 상단 모서리에서 회전합니다.
3D 변환이 작동하지 않는 이유는?
3D 변환은 깊이를 표시하기 위해 perspective가 필요합니다. 부모 요소에 'perspective: 1000px'를 추가하세요. 중첩된 3D 변환이 있는 경우 'transform-style: preserve-3d'도 설정해야 합니다. perspective 값은 3D 효과가 얼마나 두드러지게 나타날지 제어합니다.
변환에 애니메이션을 적용할 수 있나요?
네, 변환은 애니메이션에 이상적입니다. transform 속성에 CSS 트랜지션이나 키프레임 애니메이션을 사용하세요. 변환은 하드웨어 가속되어 부드러운 60fps 애니메이션을 제공합니다. 최상의 성능을 위해 'will-change: transform'과 함께 사용하세요.
변환은 어떤 순서로 적용되나요?
변환은 오른쪽에서 왼쪽으로 적용됩니다. 'transform: rotate(45deg) translate(100px)'는 먼저 이동한 다음 회전합니다. 각 변환이 후속 변환에 영향을 주기 때문에 순서가 중요합니다. 이동 후 회전하려면 'transform: translate(100px) rotate(45deg)'를 사용하세요.