CSS 변형(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다. CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다. 경고: 박스 모델에 따라 배치된 요소만 CSS 변형 속성CSS 변형을 정의할 때 중요한 두 가지 속성은 transform-origin (en-US)원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다. transform 요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다. 예제다음 이미지는 변형하지 않은 MDN 로고입니다.
회전MDN 로고를 90도 회전합니다.
비틀고 옮기기MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.
3D 전용 CSS 속성3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다.. 원근처음으로 정할 항목은
Setting perspectiveThis example shows a cube with the perspective set at different positions. How quick the cube shrinks is defined by the
HTMLThe HTML below creates four copies of the same box, with the perspective set at different values.
CSSThe CSS establishes classes that can be used to set the perspective to different distances. It also includes classes for the container box and the cube itself, as well as each of its faces.
Result다음으로는 Changing the perspective originThis example shows
cubes with popular HTML
CSS
Result모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다. 더 보기 |