Translate, Rotate 및 Scale
translate()로 요소를 이동하고, rotate()로 회전하며, scale()로 크기를 조정합니다.
Translate, Rotate 및 Scale은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
transform 속성
transform은 요소에 2D 및 3D 시각적 변환을 적용합니다. 이동, 회전, 크기 조절, 비틀기 등을 수행할 수 있습니다. 변환은 레이아웃 이후에 적용되므로 주변 요소에 영향을 주지 않습니다.
translate()
요소를 현재 위치에서 이동합니다. 인수: x 및 y 변위입니다.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
각 축을 명확하게 지정하는 개별 함수입니다:
<div class="slide-in active">Slide panel</div>rotate()
지정한 각도만큼 요소를 회전합니다. 양수 값은 시계 방향으로 회전합니다.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
요소의 크기를 모든 축에서 동일하게 조정하거나 축별로 조정합니다. 1보다 작은 값은 축소하고 1보다 큰 값은 확대합니다.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() 및 scaleY()
한 축의 크기만 독립적으로 조정합니다:
<div class="logo">LOGO</div>변환 결합
여러 변환 함수는 오른쪽에서 왼쪽 순서로 적용됩니다. 결과에는 함수의 순서가 중요합니다.
<div class="card demo-active">Card</div>변환 원점
transform-origin은 회전과 크기 조정의 중심점을 설정합니다. 기본값은 중앙(50% 50%)입니다.
<div class="card demo-active">Card</div>개별 변환 속성
최신 CSS에서는 개별 변환 함수를 별도의 속성으로 설정할 수 있습니다:
<div class="card demo-active">Card</div>변환과 전환
변환은 GPU로 합성되는 두 가지 속성 중 하나입니다. 부드럽고 성능이 좋은 효과를 위해 항상 전환과 함께 애니메이션을 적용하십시오:
<div class="card demo-active">Card</div>translate()와 top/left 비교
애니메이션에는 항상 transform: translate()를 top/left보다 우선 사용하십시오. 변환은 GPU로 합성되지만, top/left는 매 프레임마다 레이아웃 재계산을 일으킵니다.
빠른 확인
카드를 뒤집는 것처럼 요소를 가로 방향으로 반전하는 변환 함수는 무엇입니까?
요약
transform은 주변 콘텐츠에 영향을 주지 않고 레이아웃이 완료된 후 요소를 이동하고 회전하며 크기를 조정합니다. 이동에는 translate(), 회전에는 rotate(), 크기 조정에는 scale()을 사용하십시오. 하나의 선언에서 여러 함수를 연결할 수 있습니다. 최신 CSS는 개별 변환 속성을 지원합니다. GPU 합성 성능을 활용하려면 항상 전환으로 애니메이션을 적용하십시오.
자주 묻는 질문
“Translate, Rotate 및 Scale” 강의는 무료인가요?
네 — “Translate, Rotate 및 Scale” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Translate, Rotate 및 Scale”에서 뭘 배우나요?
translate()로 요소를 이동하고, rotate()로 회전하며, scale()로 크기를 조정합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Translate, Rotate 및 Scale” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Translate, Rotate 및 Scale
- Skew 및 Matrix 변환
- 변환 원점 및 원근
- 3D 변환: rotateX, rotateY, translateZ