#22 - CSS 애니메이션 - 변환

변환 설명

요소를 이동, 회전, 확대, 축소 등 요소를 변환할 수 있는 속성. 

변환 단축 입력 방법

 

속성 예시

/* 변경이름(변경값) */
.class1{
    width : 50%; 
    height : 50%; 
    color : red;
    transition : .5s ease-in;
}
.class1::after{
    width : 100%; 
    height : 100%; 
    color : blue;
    transform : translate(10px,10px) rotate(45deg);
}

 

속성 설명

속성	의미	값
transform	요소를 변환시킬 수 있다. 아래 값으로 요소 변환을 제어한다.
	이동 변경 translate(x값,y값) translate3d(x값,y값,z값) translateX(x값) translateY(y값) translateZ(z값)	숫자 + 단위
	크기 변경 scale(x값,y값)scale3d(x값,y값,z값) scaleX(x값) scaleY(y값)scaleZ(z값)	배수
	회전 변경 rotate(각도 값) rotate3d(x각도,y각도,z각도) rotateX(x각도) rotateY(y각도) rotateZ(z각도)	숫자 + deg
	기울임 변경 skew(x각도,y각도) skew3d(x각도,y각도,z각도) skewX(x각도) skewY(y각도)	숫자 + deg
	전체 변경. 다루기 어려워 잘 사용하지 않음 matrix(n,n,n,n,n,n) matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	숫자+단위
	원근법. 해당 태그는 transform 속성 중 가장 먼저 선언되어야 한다. perspective(n)	숫자
transform-origin	요소가 변환할 때의 기준점을 설정. x축 y축 z축에 대한 값을 순서대로 입력 ( 예 : 요소 회전시 회전되는 기준점 ) transform-origin : 방향 방향;	방향, % , 숫자+단위
transform-style	3D 효과를 준 요소의 자식에도 3D변환을 사용할지 설정.  flat : 자식 요소에 3d 적용 안함. 기본 값preserve-3d : 자식 요소에 3d 적용	flat, preserve-3d
perspective	하위 요소에 대한 원근 거리 설정. 하위 요소에 대한 설정이기 때문에 부모 요소에 적용해야하고, 대상이 여러개가 될 수 있음	숫자 + 단위
perspective-origin	원근 거리의 기준점 설정	방향, %, 숫자+단위
backface-visibility	3D 회번 된 요소의 뒷변을 숨길지 설정	visible, hidden