변환 원점 및 원근
transform-origin으로 변환의 회전 기준점을 변경하고 perspective로 깊이감을 추가합니다.
변환 원점 및 원근은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
transform-origin 기본값
기본적으로 변환은 요소의 중심점을 기준으로 이루어집니다: 50% 50%. transform-origin 속성으로 이 중심점을 변경할 수 있습니다.
transform-origin 설정
키워드, 백분율 또는 길이 값을 사용할 수 있습니다. 형식: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>크기 조정과 transform-origin
왼쪽 위 모서리를 기준으로 크기를 조정합니다(드롭다운 펼치기 애니메이션에 유용합니다):
<div class="dropdown open">Dropdown menu</div>회전과 transform-origin
시곗바늘을 밑부분을 중심으로 회전합니다:
<div class="clock"><div class="hand"></div></div>perspective 속성
perspective는 3D 변환에서 사용자와 z=0 평면 사이의 거리를 설정합니다. 값이 작을수록 원근 왜곡이 더 극적으로 나타나고, 값이 클수록 깊이감이 은은하게 나타납니다.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
원근의 소실점을 변경합니다. 기본값은 중앙(50% 50%)입니다.
<div class="scene"><div class="card">Card</div></div>함수로서의 perspective
perspective()는 요소 자체에 변환 함수로 사용할 수도 있습니다(부모 요소에는 사용하지 않음). 이렇게 하면 3D 컨텍스트가 해당 요소에만 적용됩니다.
<div class="card">Card</div>transform-style: preserve-3d
기본적으로 자식 요소의 3D 변환은 2D로 평면화됩니다. 자식 요소의 실제 3D 위치를 유지하려면 부모 요소에 transform-style: preserve-3d를 설정하십시오.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>카드 뒤집기 효과
원근과 preserve-3d를 사용하는 전형적인 뒤집기 카드입니다:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden은 3D 변환된 요소의 뒷면을 숨깁니다. 앞면을 통해 뒷면이 보이지 않아야 하는 뒤집기 카드에 필수적입니다.
원근과 원점 결합
커서 위치에 반응하는 극적인 3D 마우스 오버 기울이기 효과입니다:
<div class="card demo-active">3D Tilt Card</div>빠른 확인
드롭다운이 transform: scaleY(0)으로 숨겨지고 scaleY(1)로 표시됩니다. 위쪽에서 아래로 펼쳐지게 하려면 어떤 transform-origin을 사용해야 합니까?
요약
transform-origin은 회전과 크기 조정의 중심점을 변경하며, 드롭다운 펼치기, 시곗바늘, 마우스 오버 기울이기에 필수적입니다. 부모 요소의 perspective는 3D 깊이 컨텍스트를 만듭니다. transform-style: preserve-3d는 중첩된 3D 요소를 활성화합니다. backface-visibility: hidden은 뒤집기 효과에서 요소의 뒷면을 숨깁니다.
자주 묻는 질문
“변환 원점 및 원근” 강의는 무료인가요?
네 — “변환 원점 및 원근” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“변환 원점 및 원근”에서 뭘 배우나요?
transform-origin으로 변환의 회전 기준점을 변경하고 perspective로 깊이감을 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“변환 원점 및 원근” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.