9_transform

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 개요

CSS의 transform 속성은 요소의 2D 또는 3D 변환을 적용합니다. 이 변환은 요소의 크기, 위치, 회전 등을 변경할 수 있습니다.

2. 기본문법

2.1. 2D

함수	설명
`translate(x, y)`	요소를 x축과 y축을 따라 이동시킵니다.
`rotate(angle)`	요소를 주어진 각도만큼 회전시킵니다.
`scale(x, y)`	요소의 크기를 조정합니다.
`skew(x-angle, y-angle)`	요소를 기울입니다.
`matrix(n,n,n,n,n,n)`	2D 변환을 위한 행렬입니다. translate, scale, rotate 등을 한 번에 적용할 수 있습니다.
`transform-origin`	변환 요소의 기준점을 설정합니다. `transform-origin: x y z;` 형태로 사용하며, x, y는 좌표를 지정하고, z는 깊이를 지정합니다.

2.2. 3D

css-3d-test

속성/함수	설명
`translate3d(x, y, z)`	요소를 x, y, z축을 따라 이동시킵니다.
`rotate3d(x, y, z, angle)`	3차원 공간에서 요소를 회전시킵니다. x, y, z는 회전축을 정의하고, angle은 회전 각도를 정의합니다.
`scale3d(x, y, z)`	요소의 크기를 3차원 공간에서 조정합니다. (다른 3차원 트랜스폼이 없는 경우 특별히 스케일링할 것이 없기 때문에 가시적인 효과를 얻을수 없습니다.)
`perspective(n)`	요소에 원근법 변환을 적용합니다. n 값은 시점의 거리를 정의하며, 작은 값일수록 더 강한 원근 효과를 나타냅니다.
`matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)`	3D 변환을 위한 4x4 행렬입니다. translate3d, scale3d, rotate3d 등을 한 번에 적용할 수 있습니다.
`transform-origin`	변환 요소의 기준점을 설정합니다. `transform-origin: x y z;` 형태로 사용하며, x, y는 좌표를 지정하고, z는 깊이를 지정합니다.
`perspective-origin`	원근법 변환의 시점을 설정합니다. `perspective-origin: x y;` 형태로 사용하며, x, y는 좌표를 지정합니다.

2.2.1. perspective

Perspective 값이 크면 멀어서 작게, 작으면 가까워서 크게보임. (값은 0보다 커야함)
사람의 시지각은 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 보인다.

2.2.2. perspective-origin

사용자의 시선 위치를 조정하여 소실점적용

3. 응용예제

3.5. 3차원 공간에서 회전하는 이미지

3.5.1. css 버전

가로, 세로 200픽셀인 8장의 사진을 이용해 Y축을 기준으로 회전하 는 애니메이션을 제작하고 클릭하면 멈추도록 효과 적용

미리보기

이미지다운로드

3.5.2. js 버전

3.6. 추가예제

제목1	제목2
01-perspective ‎	[01-perspective ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/01-perspective.html ‎)
02-perspective()	02-perspective()
03-translatez ‎	[03-translatez ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/03-translatez.html ‎)
04-perspective-origin	04-perspective-origin
05-preserve-3d ‎	[05-preserve-3d ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/05-preserve-3d.html ‎)
06-playing-card	06-playing-card
07-rotate-x-rotate-y	07-rotate-x-rotate-y
08-rotate3d.htm ‎	[08-rotate3d.htm ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/08-rotate3d.htm ‎)
09-rotate3d-2	09-rotate3d-2
10-translate3d	10-translate3d
11-scalez ‎	[11-scalez ‎ ](https://qwerewqwerew.github.io/source/css/2-transform/step0/11-scalez.html ‎ )
12-3d-cube ‎	[12-3d-cube ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/12-3d-cube.html ‎)
13-animated-3d-cube	13-animated-3d-cube

9_transform

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. 개요

MDN

CSS의 transform 속성은 요소의 2D 또는 3D 변환을 적용합니다. 이 변환은 요소의 크기, 위치, 회전 등을 변경할 수 있습니다.

trnansform 속성정리표

2. 기본문법

2.1. 2D

함수	설명
`translate(x, y)`	요소를 x축과 y축을 따라 이동시킵니다.
`rotate(angle)`	요소를 주어진 각도만큼 회전시킵니다.
`scale(x, y)`	요소의 크기를 조정합니다.
`skew(x-angle, y-angle)`	요소를 기울입니다.
`matrix(n,n,n,n,n,n)`	2D 변환을 위한 행렬입니다. translate, scale, rotate 등을 한 번에 적용할 수 있습니다.
`transform-origin`	변환 요소의 기준점을 설정합니다. `transform-origin: x y z;` 형태로 사용하며, x, y는 좌표를 지정하고, z는 깊이를 지정합니다.

2.2. 3D

css-3d-test

속성/함수	설명
`translate3d(x, y, z)`	요소를 x, y, z축을 따라 이동시킵니다.
`rotate3d(x, y, z, angle)`	3차원 공간에서 요소를 회전시킵니다. x, y, z는 회전축을 정의하고, angle은 회전 각도를 정의합니다.
`scale3d(x, y, z)`	요소의 크기를 3차원 공간에서 조정합니다. (다른 3차원 트랜스폼이 없는 경우 특별히 스케일링할 것이 없기 때문에 가시적인 효과를 얻을수 없습니다.)
`perspective(n)`	요소에 원근법 변환을 적용합니다. n 값은 시점의 거리를 정의하며, 작은 값일수록 더 강한 원근 효과를 나타냅니다.
`matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)`	3D 변환을 위한 4x4 행렬입니다. translate3d, scale3d, rotate3d 등을 한 번에 적용할 수 있습니다.
`transform-origin`	변환 요소의 기준점을 설정합니다. `transform-origin: x y z;` 형태로 사용하며, x, y는 좌표를 지정하고, z는 깊이를 지정합니다.
`perspective-origin`	원근법 변환의 시점을 설정합니다. `perspective-origin: x y;` 형태로 사용하며, x, y는 좌표를 지정합니다.

2.2.1. perspective

Perspective 값이 크면 멀어서 작게, 작으면 가까워서 크게보임. (값은 0보다 커야함)
사람의 시지각은 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 보인다.

2.2.2. perspective-origin

사용자의 시선 위치를 조정하여 소실점적용

3. 응용예제

3.1. 다양한 transform

미리보기

3.2. 예제: 회전하는 코알라

backface 미리보기

3.2.1. 예제: 카드뒤집기

미리보기

3.3. 예제 hover시 커지는 이미지

미리보기

3.4. 마우스위치에 대응하는 애니메이션

미리보기

3.5. 3차원 공간에서 회전하는 이미지

3.5.1. css 버전

가로, 세로 200픽셀인 8장의 사진을 이용해 Y축을 기준으로 회전하 는 애니메이션을 제작하고 클릭하면 멈추도록 효과 적용

미리보기

이미지다운로드

3.5.2. js 버전

3.6. 추가예제

제목1	제목2
01-perspective ‎	[01-perspective ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/01-perspective.html ‎)
02-perspective()	02-perspective()
03-translatez ‎	[03-translatez ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/03-translatez.html ‎)
04-perspective-origin	04-perspective-origin
05-preserve-3d ‎	[05-preserve-3d ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/05-preserve-3d.html ‎)
06-playing-card	06-playing-card
07-rotate-x-rotate-y	07-rotate-x-rotate-y
08-rotate3d.htm ‎	[08-rotate3d.htm ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/08-rotate3d.htm ‎)
09-rotate3d-2	09-rotate3d-2
10-translate3d	10-translate3d
11-scalez ‎	[11-scalez ‎ ](https://qwerewqwerew.github.io/source/css/2-transform/step0/11-scalez.html ‎ )
12-3d-cube ‎	[12-3d-cube ‎](https://qwerewqwerew.github.io/source/css/2-transform/step0/12-3d-cube.html ‎)
13-animated-3d-cube	13-animated-3d-cube