css (7)_transform&transition
Transform
- 회전, 크기 조절, 기울이기 ,이동 효과등을 부여할 수 있다
- 함수를 작성해서 쓴다
- 함수를 한꺼번에 스페이싱으로 적용시키는 것도 가능하다
- 함수들을 작성하는 순서가 있다 (왼쪽 -> 오른쪽) 부터 적용
함수의 종류
scale
- 2D 만을 위해서 나온 것 , 3D는 사용 불가능하다
- 크기를 조절한다
- width 를 사용하는 것과 scale 을 사용하는 것 다르다
transform: scale(sx)
transform: scale(sx,sy)
rotate
- 값을 하나만 받을 수 있음 angle (자료형이다
transform: ratate(45deg)
transform: ratate(0.25turn)
/*둘다 45도 회전*/
transform: scale(sx)
transform: scale(sx,sy)
transform: ratate(45deg)
transform: ratate(0.25turn)
/*둘다 45도 회전*/
translate
- 이동을 시킬 수 있다
transform: translate (200px) /* (200px,0) 을 입력한것과 동일 */
transform: translate(100px,150px)
transform: translateY (150px)
-> y축으로만 150px 이동한 것
사진의 기준으로 50%,30%만 이동
transform: translateY (50%,30%)
skew
- 기울이기를 담당
- rotate와 비슷하게 각도를 사용
- 값을 하나만 입력하면 그 한쪽 방향으로만 이동한다
X기준으로 20도 움직인 형태
transform: skewX(20deg)
Y축 기준으로 20도 움직인 형태
transform: skewY20deg)
transform-origin
- transform과 별도의 프로퍼티로 사용한다
- 크기를 키우고 위치를 변경하는 기준점을 변경하는 것
- 기본값 initial 값이 50% -> 즉 center 이다
- 이것을 변경하는 것에 따라서 결과값이 엄청 달라진다
transform : scale (1.3);
transform-origin: left;
transform : rotate (45deg);
transform-origin: top left;
Transition
- 어느정도 시간의 흐름을 가지고 변환되는 상태를 보여주는 것
- 메뉴 버튼을 누르면 요소들이 출력된다던지 좀 더 다이나믹한 에니메이션 효과를 줄수있다
transition-property
-특정 요소만 선택하여 바꿀수 있는 것
- none : 아무것도 바꾸지않겠다는 키워드
- all : 가지고 있는것 모든 것을 바꾸겠다
transition-duration
- 얼마 만큼을 시간을 가지고 바꿀 것인지
background 의 색상을 2초간 바꾸겠다
transition-duration: 2s; ->(2000ms)
transition-property : background-color;
transition-delay
- 트렌지션 되는것을 지연시키기 위함
- 요소들이 여러개 있을 때 트리거를 걸어서 순서대로 동작할 수 있도록
🚨 어떤 식으로 동작하는지 예시 잘 나와있음
https://developer.mozilla.org/ko/docs/Web/CSS/transition-delay
transition-timing-function
-트렌지션되는 중간과정의 시간을 조정할 수 있다
👌동작 샘플 확인하기!
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
transition
-
단축 요소 한줄에 적어서 사용하는게 대부분이다
-
순서가 중요하다 (duration 하고 delay 둘다 시간을 사용하기 때문!!)
-
될수 있으면 property, duration, delay, timing-function 이 순서 작성
/ Apply to 1 property /
/ property name | duration /
transition: margin-left 4s;
/ property name | duration | delay /
transition: margin-left 4s 1s;
/ property name | duration | timing function | delay /
transition: margin-left 4s ease-in-out 1s;
/ Apply to 2 properties /
transition: margin-left 4s, color 1s;
/ Apply to all changed properties /
transition: all 0.5s ease-out;
/ Global values /
transition: inherit;
transition: initial;
transition: unset;
Author And Source
이 문제에 관하여(css (7)_transform&transition), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@akk0504/css-7transformtransition저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)