CSS 변형 생성기

CSS 변환 가이드

CSS 변환은 문서 흐름에 영향을 주지 않고 요소의 위치, 크기 및 방향을 변경합니다. 회전, 크기 조정, 이동 및 기울이기를 단일 변환 속성으로 결합할 수 있으며 CSS 전환을 통해 원활하게 애니메이션 효과를 줍니다.

슬라이더를 드래그하여 실시간으로 적용된 각 변환을 확인하세요. 점선 직사각형은 원래 위치를 표시하고 단색 카드는 변환된 결과를 표시합니다. 만족스러우면 전체 변환 값을 복사합니다.

Pro Tips

• 변환에서는 순서가 중요합니다. 변환: 번역(...) 회전(...) 이동한 다음 회전합니다. 회전(...) 변환(...)은 좌표계를 먼저 회전하여 다른 결과를 생성합니다.
• 부드러운 호버 효과를 위해 변환과 전환을 결합합니다. .card:hover { 변환: scale(1.05); } 전환 포함: .2s 변환; 기본 클래스에서.