Transform Playground 완벽 가이드
CSS Transform이란 무엇인가요?
CSS Transform은 요소를 2D 또는 3D 공간에서 변환하는 속성입니다. translate(이동), rotate(회전), scale(크기), skew(기울기) 등의 함수를 사용하여 요소의 위치, 크기, 회전, 모양을 변경할 수 있습니다. 애니메이션, 인터랙티브 UI, 3D 효과 등에 활용됩니다.
Transform 함수 설명
• Translate(px, px): 요소를 X, Y축으로 이동. 음수값으로 반대 방향 이동. • Rotate(deg): 요소를 회전. 양수는 시계 방향, 음수는 반시계 방향. • Scale(n, n): 요소 크기 조절. 1이 원본 크기, 1 미만은 축소, 1 초과는 확대. • Skew(deg, deg): 요소를 X, Y축으로 기울임. 원근감 효과에 유용.
사용 방법
1단계: 프리셋 탭에서 인기 있는 조합을 선택하거나 커스텀 탭에서 직접 설정합니다. 2단계: translate, rotate, scale, skew 슬라이더로 값을 조절합니다. 3단계: transform-origin으로 변환 원점을 선택합니다. 4단계: 3D 효과를 위해 perspective 값을 조절합니다. 5단계: 미리보기에서 확인 후 CSS 코드를 복사하여 프로젝트에 적용합니다.
활용 사례
• 버튼 호버 애니메이션에 크기 변화 효과 적용 • 카드 회전 효과로 인터랙티브 UI 구현 • 드롭다운 메뉴의 슬라이드 애니메이션 • 로딩 스피너의 회전 효과 • 이미지 갤러리의 3D 카드 효과 • 텍스트 기울기로 강조 효과 추가
자주 묻는 질문 (FAQ)
- Q. 브라우저 호환성은 어떤가요?
- A. transform 속성은 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 완벽하게 지원됩니다. IE10 이상에서도 작동합니다. 3D transform은 일부 구형 브라우저에서 지원이 제한될 수 있습니다.
- Q. Transform과 Transition의 차이는 무엇인가요?
- A. Transform은 요소의 모양이나 위치를 변경하는 속성이고, Transition은 이러한 변화를 부드럽게 애니메이션하는 속성입니다. Transform으로 변형을 정의하고, Transition으로 시간 차를 주어 자연스러운 애니메이션을 만듭니다.
- Q. 여러 transform을 함께 사용할 수 있나요?
- A. 네, 공백으로 구분하여 여러 transform 함수를 연결할 수 있습니다. 예: transform: translate(10px, 20px) rotate(45deg) scale(1.5); 적용 순서에 따라 결과가 달라질 수 있으므로 주의가 필요합니다.