CSS - 속성(전환&변환)

전환(transitions)

; css 속성의 전환 효과를 지정.

transition: property duration ease delay;

transition-property : 전환 효과를 사용할 속성 이름.

transition-duration : 전환 효과의 지속시가 설정.

transition-timing-function : 타이밍 함수 지정.

transition-delay : 전환 효과의 대기시간 설정.

변환(transform)

; 요소의 변환 효과(변형)를 지정.

transition: 변환함수1 변환함수2 ....;

transition: 원근법 이동 크기 회전 기울임;

 

transform 2D

이동 : translate(x, y), translateX(x), translateY(y).

크기 : scale(x, y), scaleX(x), scaleY(y).

회전 : rotate(degree)

기울임 : skew(x-deg, y-deg), skewX(x-deg), skewY(y-deg)

2차원 변환 효과 : matrix(n, n, n, n, n, n)

transform 3D

이동 : translate3d(x, y, z), translateX(x), translateY(y), translateZ(z).

크기 : scale3d(x, y, z), scaleX(x), scaleY(y), scaleZ(z).

회전 : rotate3d(x, y, z, a), rotateX(x), rotateY(y), rotateZ(z).

원근법(거리) : perspective(n). 젤 우선으로 선어되어야 한다.

3차원 변환 효과 : matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n).

transform-origin

; 요소의 변환의 기준점을 설정. (anchor point)

x축 : left, right, center, %, 단위. 기본값 50%.

y축 : top, bottom, center, %, 단위. 기본값 50%.

z축 : 단위. 기본값 0.

transform-style

; 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정.

flat : 자식 요소의 3D 변환을 사용하지 않음. 기본값.preserve-3d : 자식 요소의 3D 변환을 사용함.

perspective

; 하위 요소를 관찰하는 원근 거리를 설정.

단위 : px, em, cm 등 단위로 지정.

perspective(속성으로 사용할때) : 적용 대상은 관찰 대상의 부모요소. perspective-origin.

transform: perspective()(함수로 사용할때) : 적용 대상은 관찰 대상. transform-origin;.

 

perspective-origin

; 원근 거리의 기준점을 설정.

x축 : left, right, center, %, 단위. 기본값 50%.

y축 : top, bottom, center, %, 단위. 기본값 50%.

backface-visibility

; 3D 변환으로 회전된 요소의 뒷면 숨김을 설정.

visible : 뒷면 숨기지 않음.

hidden : 뒷면 숨김.

matrix(a, b, c, d, e, f)

; 요소의 2차원 변환(transforms) 효과를 지정. scale(). skew(), translate(). rotate()를 지정.