transform
transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있다.
transform / rotate
transform의 rotate로 요소를 회전시킬 수 있다.
문법
transform: rotate( angle )
transform: rotateX( angle )
transform: rotateY( angle )
angle에는 각의 크기를 입력합니다.
단위는 deg, rad, grad, turn 등을 사용합니다.
turn은 1회전, 즉 360deg를 의미합니다.
각이 양수인 경우 시계방향으로 회전한다.
rotateX 는 가로축 rotateY 는 세로축으로 회전한다.
transform / translate
transform의 translate로 요소를 이동시킬 수 있다.
문법
transform: translateX( 50px )
오른쪽으로 50px 이동한다. 길이 단위를 음수로 지정하면 왼쪽으로 이동
transform: translateY( 50px )
아래쪽으로 50px 이동한다. 길이 단위를 음수로 지정하면 위쪽으로 이동
transform: translate( 50px, 50% )
오른쪽으로 50px, 아래쪽으로 50% 이동한다.
transform / scale
transform의 scale로 요소를 확대 또는 축소할 수 있다.
1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.
문법
transform: scale( 2.0 );
가로와 세로 모두 2배 확대
transform: scale( 2.0, 1.5 );
가로로 2배, 세로로 1.5배 확대
transform: scaleX( 2.0 );
가로로 2배 확대
transform: scaleY( 1.5 );
세로로 1.5배 확대
transform / skew
transform의 skew로 요소를 비틀 수 있다.
문법
transform: skewX( 30deg );
가로 방향으로 30도 비튼다.
transform: skewY( 30deg );
세로 방향으로 30도 비튼다.
transform: skewX( 30deg, 60deg );
가로 방향으로 30도, 세로 방향으로 60도 비튼다.
transition
지정할 속성에 변화나 움직임을 줄 때, 일정 시간 간격을 두고 그 속성에 대한 변화와 움직임을 부드럽게 해주는 속성이다.
주로 심플하면서도 단순한 움직임이나 변환 기능의 애니매이션을 구현할 경우 사용한다.
문법
transition: property timing-function duration delay | initial | inherit
transition-property
transition-property로 transition이 적용될 속성을 정한다.
예를 들어 transition-property:background-color로 지정하면
background-color이 지정된 것이다.
transition-property: none | all | property | initial | inherit
none : 모든 속성에 적용하지 않습니다.
all : 모든 속성에 적용합니다.
property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다
transition-timing-function
transition의 진행 속도를 조절할 수 있다.
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit;
기본값은ease이다.
cubic-bezier( n, n, n, n )
cubic-bezier( n, n, n, n )를 사용할 때 n에 들어갈 값은 http://cubic-bezier.com에서 찾을 수 있다.
점을 움직여서 원하는 커브를 만들고, 상단에 있는 수를 사용한다.
transition-duration
transition이 끝날 때까지 걸리는 시간을 정한다.
transition-duration: time| initial | inherit
기본값은 0s 이다.
시간 단위는 초(s) 또는 1/1000초(ms)를 사용한다.
