CSS Transform 생성기
CSS transform 속성을 시각적으로 생성하고 미리보기할 수 있습니다.
CSS Transform은 웹 요소를 2D 또는 3D 공간에서 변형할 수 있는 강력한 CSS 속성입니다. 이동(translate), 회전(rotate), 크기 조정(scale), 기울임(skew) 등의 변형을 통해 동적이고 인터랙티브한 웹 디자인을 구현할 수 있습니다. 실시간 미리보기를 통해 원하는 효과를 쉽게 만들어보세요.
transform: none;Transform 함수들
- • translate(x, y): translate(x, y): 요소를 x, y만큼 이동
- • scale(x, y): scale(x, y): 요소를 x, y 배율로 크기 조정
- • rotate(angle): rotate(angle): 요소를 각도만큼 회전
- • skew(x, y): skew(x, y): 요소를 x, y 각도만큼 기울임
사용 팁
- • 여러 transform 함수를 공백으로 구분하여 조합 가능
- • transform-origin으로 변환 기준점 변경 가능
- • transition과 함께 사용하여 애니메이션 효과 생성
- • 3D transform을 위해 perspective 속성 활용
🎯 Transform 기본 개념
CSS Transform은 요소의 모양, 크기, 위치를 변경하는 CSS 속성입니다. 문서의 일반적인 흐름을 방해하지 않으면서 요소를 시각적으로 변형할 수 있습니다.
기본 문법:
transform: function(value) function(value) ...;📐 Transform 함수 상세 설명
🔄 Translate (이동)
- •
translate(x, y): translate(x, y): X, Y축으로 이동 - •
translateX(x): translateX(x): X축으로만 이동 - •
translateY(y): translateY(y): Y축으로만 이동 - •
translate3d(x, y, z): translate3d(x, y, z): 3D 이동
transform: translate(50px, 100px);📏 Scale (크기 조정)
- •
scale(x, y): scale(x, y): X, Y축 크기 조정 - •
scaleX(x): scaleX(x): X축 크기만 조정 - •
scaleY(y): scaleY(y): Y축 크기만 조정 - • 1보다 크면 확대, 작으면 축소
transform: scale(1.5, 0.8);🔄 Rotate (회전)
- •
rotate(angle): rotate(angle): Z축 중심 회전 - •
rotateX(angle): rotateX(angle): X축 중심 회전 - •
rotateY(angle): rotateY(angle): Y축 중심 회전 - • 각도는 deg, rad, turn 단위 사용
transform: rotate(45deg);📐 Skew (기울임)
- •
skew(x, y): skew(x, y): X, Y축 기울임 - •
skewX(angle): skewX(angle): X축 기울임 - •
skewY(angle): skewY(angle): Y축 기울임 - • 평행사변형 모양으로 변형
transform: skew(15deg, 5deg);🎨 Transform Origin (변형 기준점)
transform-origin 속성으로 변형의 기준점을 설정할 수 있습니다. 기본값은 요소의 중심(50% 50%)입니다.
키워드 사용
transform-origin: top left;퍼센트 사용
transform-origin: 25% 75%;픽셀 사용
transform-origin: 10px 20px;⚡ 성능 최적화 팁
✅ 권장사항
- • transform과 opacity만 애니메이션
- • will-change 속성 활용
- • 3D 가속 활용 (translateZ(0))
- • 복합 레이어 생성으로 성능 향상
❌ 피해야 할 것
- • width, height 애니메이션
- • left, top 위치 애니메이션
- • 과도한 transform 중첩
- • 불필요한 will-change 사용
성능 최적화 예시:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 애니메이션과 Transition
Transform은 CSS Transition 및 Animation과 함께 사용하여 부드러운 효과를 만들 수 있습니다.
Transition 예시
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Keyframe Animation 예시
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 브라우저 호환성
CSS Transform은 모든 모던 브라우저에서 지원되지만, 구형 브라우저를 위한 벤더 프리픽스가 필요할 수 있습니다.
벤더 프리픽스 예시:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 실무 활용 예시
카드 호버 효과
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}로딩 스피너
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}모달 등장 효과
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}버튼 클릭 효과
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 디버깅 및 개발 도구
브라우저 개발자 도구
- • Elements 패널에서 실시간 편집
- • Computed 탭에서 최종 값 확인
- • Performance 탭으로 성능 분석
- • 3D View로 레이어 구조 확인
유용한 CSS 속성
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 프로 팁
성능 팁
GPU 가속을 위해 transform3d() 또는 translateZ(0)을 사용하여 복합 레이어를 생성하면 애니메이션 성능이 크게 향상됩니다.
접근성 팁
prefers-reduced-motion 미디어 쿼리를 사용하여 움직임에 민감한 사용자를 위한 대안을 제공하세요.
디자인 팁
transform-origin을 적절히 설정하면 더 자연스러운 변형 효과를 만들 수 있습니다.
개발 팁
CSS 변수를 활용하여 transform 값을 동적으로 제어하면 JavaScript와의 연동이 쉬워집니다.