2차원 변환_transform, transition

 

프로그래밍이랑 합쳐져서 완성.

애니메이션과 함께! 사용. ex) 드래그블 같은 건가(?)

 

1. 2차원 변환 함수

tag {transform : translate(50px, 100px);}
                           /*수평 50px, 수직 100px 이동*/

 

※ position : relavtive;와 transform : translate( ); 비교

둘다 수평, 수직 이동. 둘의 차이는 기준점.

	position : relavtive;	transform : translate( );
기준점	static 위치의 왼쪽 모서리 상단(0, 0)	원래 위치의 정가운데

 

 

-종류와 설정

translate(수평, 수직)	rotate(deg)	scale( )
양수(오른쪽, 아래쪽) 음수(왼쪽, 위쪽)	양수(시계 방향) 음수(반시계 방향)	크기 변환 0 < 1(원본) < ~
skewX(deg)	skewY(deg)	skew(deg, deg)	matrix(a, b, c, d, tx, ty)
x축 기준으로 기울기	Y축 기준으로 기울기	x, y축 기울기 변환	2차원 행렬 구조 변환

 

tag { transform : translate(50px, 100px); } /*수평 이동, 수직 이동*/

tag { transform : rotate(45deg); } /* 시계방향으로 45˚ 기울임*/

tag { transform : scale(0.7); } /* 1(원본)을 기준으로 크기 표현 */

tag { transform : skewX(45deg); } /* x축 기울기 변환*/

tag { transform : skdwY(45deg); } /* y축 기울기 변환 */

tag { transform : skdw(45deg, 30deg); } /* x축, y축 기울기 변환 */

tag { transform : matrix(a, b, c, d, tx, ty); } /* 2차원 행렬 구조 변환 */
                      /* 선형 변환 */ /* 이동(translation) */

 

*transform : 축약형으로 여러 개 나열할 수 있다.

tag {
    transform: translate(200px) rotate(45deg) scale(1.5) skew(30deg);
}

 

cf) 기준점 설정

tag {transform-origin : center;} /* 영영의 가운데가 기준점이 된다. */
                        /* top left | 50px 50px | bottom right 60px 등의 값을 줄 수 있다. */

 

 

3. 변화 속성

효과가 적용되는 과정에 다양한 속성을 설정하여 시각적 효과

 

(1) transition

기존값에서 변화가 생긴다면 변화가 완료될 때까지 걸리는 시간 설정.

크기 변경, 위치 변경, 색 변경, 회전 등등.

 

※ transition에서 설정할 수 있는 것들

tag { transition:property duration timing-function delay;} /* 단축형 */
                /* 속성   소요시간  시작끝 타이밍  시작 딜레이  */

 

-단축형

tag {transition:width 2s, height 2s;}
                /* width 값 변화 2초, height값 변화 2초 */
                
tag {
    transition : background 2s linear 1s; /*배경색이 1초 후에 2초 동안 일정한 속도로 바뀜.*/
                 padding 1s linear 2s; /*안쪽 여백이 2초 후에 1초 동안 일정한 속도로 바뀜.*/
}

 

-기본형

tag { /* 각각 설정 */
    transition-property:width color;
    transition-duration:2s;
    transition-timing-function:ease;
    transition-delay:1s;
}

 

※ transitiom-timing-function 속성값 종류

linear	ease	ease-in
동일한 속도	느리게 시작 → 점점 빨라짐 → 느리게 끝남	느리게 시작 → 점점 빨라짐 → 일정한 속도에 다다르면 유지
ease-out	ease-in-out	cubic-bezier(n, n, n, n)
일정한 속도의 등속 변화 시작 → 느려지며 끝남	느리게 시작 → 느리게 끝남	처음과 끝의 속도 설정

 

 

사용자와 상호작용할 때

애니메이션 효과