CSS Property - Transform, Transition 움직이기~!

 

 

CSS Transform(변형), Transition(전이효과)

 

---

 

• Transform은 '변형'이라는 뜻으로 그래픽툴에서 많이 사용되는 메뉴명입니다.
• HTML Element를 변형한다는 것은, 크기조절, 회전, 기울임, 이동 등을 의미합니다.
  
  
• Transform(트랜스폼)과 Transition(트랜지션)을 잘 사용하면, animation 효과나 보기좋은 인터렉션을 줄 수 있습니다.

 

 

자, 한번 해봅시다~!

 

Welcome to CODING HELL

 

 

A. Transform(트랜스폼) 속성

- 모든 속성은 x,y 같이 또는 x,y를 별도로 지정할 수 있다.

- Transform속성은 하나이며, 값을여러개로 나열하여 지정한다.

 

 

- 참조사이트 - 바로가기

property	value	description
transform	scale()	크기 지정
	skew()	기울임 각도
	rotate()	회전 각도
	translate()	이동 거리
transform-origin	left top	x, y의 기준축을 정할 수 있다.

 

 

 

B. Transition(트랜지션) 속성

- 모든 속성은 x,y 같이 또는 x,y를 별도로 지정할 수 있다.

- 참조사이트 - 바로가기

property	value	description
transition	축약형	크기 지정
transition-property		전이효과를 줄 속성지정 css속성마다 다른 전이효과를 줄 수 도 있다.
transition-duration		전이효과가 일어나는데 걸리는 시간
transition-delay		전이효과 일어나기 전 대기(지연) 시간
transition-timing-function		전이효과의 속도 조절

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.