[CSS] transform, transition 효과 사용하기

transform

속성명	속성값	설명
transform(2D)	scale	선택한 요소의 크기를 확대 또는 축소한다. 현재 크기의 비율을 기준으로 1보다 크면 확대, 1보다 작으면 축소한다.
	skew	선택한 요소를 x축 또는 y축으로 비틀어서 변형한다. 원하는 각도를 지정하여 기울기를 조절할 수 있다.
	translate	선택한 요소를 현재 위치 기준에서 x축 또는 y축으로 이동할 수 있다.
	rotate	선택한 요소를 회전시킨다.
transform(3D)	rotateX, rotateY	선택한 요소를 x축 또는 y축으로 입체감 있게 회전한다.
	translateZ	선택한 요소를 z축으로 입체감 있게 보이면서 이동시킨다.
perspective	px	3D효과가 적용된 요소가 입체감 있게 보이도록 부모요소에 perspective 속성을 적용하여 원근감을 부여한다.
transform-style	preserve-3d	3D효과가 적용된 요소에 모션처리를 하면 해당 3D효과가 풀린다. 이 때 부모 요소에 preserve-3d 속성을 적용하여 3D효과를 유지시킨다.
transform-origin	가로축, 세로축	요소의 변형이 일어나는 중심축을 가로축, 세로축 기준으로 변경할 수 있다.

 

예시

transform 속성 적용전 모습

왼쪽부터 scale, skew, translate 속성을 적용한 모습
 

왼쪽은 2D rotate를 사용한모습.
가운데와 오른쪽은 rotateY에 각도를 지정하고 transform-origin으로 입체감있게 회전되었다.
 

rotateX,Y와 perspective를 사용해 입체감있게 변형했다.
 
 
 

translateZ를 사용해 z축으로 하나는 100px만큼 하나는 -100px만큼 이동했다. 
 
 
 
 
 

---

transition 

속성명	속성값	설명
transition-property	속성명	전환 효과를 줄 CSS속성명을 지정한다. 속성명은 여러개 지정할 수 있고, all을 입력하면 모든 속성을 사용할 수 있다.
transition-duration	지속 시간(초 단위)	전환 효과 발생시 지속할 시간을 초(s)단위로 나타낸다.
transition-delay	지연 시간(초 단위)	전환 효과 발생시 지연할 시간을 초(s)단위로 나타낸다.  지연 시간 이후에 전환 효과가 발생한다.
transition-timing-function	가속도	전환 효과의 가속도를 나타낸다. 가속도 효과는 다음의 키워드를 입력하여 적용한다. - linear: 등속효과 - ease: 가속효과 - ease-in: 모션 시작 시 가속 - ease-out: 모션 종료 시 가속 - ease-in-out: 모션 시작 및 종료 시 모두 가속 - cubiz-bezier: 사용자가 지정한 가속 효과 적용
transition	속성명 / 전환 시간 / 가속도 / 지연시간	모든 전환 효과 속성값을 한번에 축약해서 사용할 수 있다

 

cubic-bezier.com

가속도 함수를 지정하려면 복잡한 수학 연산을 해야하지만, 위 사이트에서 cubic-bezier구문을 직접 조절하면 간편하게 사용할 수 있다.
 

section {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  float: left;
  margin: 50px;
  perspective: 400px;
}

section article {
  width: 100%;
  height: 100%;
  background: blue;
  opacity: 0.3;
  transform: rotateY(0deg);
  transition-property: transform opacity;
  transition-duration: 1s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.46, -0.64, 0.58, 1.39);
}

section:hover article {
  transform: rotateY(720deg);
  background: yellow;
}

 
hover효과를 사용해 마우스를 박스 안에 올리면 회전문 효과를 낼 수 있도록 해봤다.
 
위는 trasition 효과를 각 각 주었지만 

section article {
  width: 100%;
  height: 100%;
  background: blue;
  opacity: 0.3;
  transform: rotateY(0deg);
  transition: all 1s cubic-bezier(0.46, -0.64, 0.58, 1.39) 0s;
}

이런식으로 transition 하나로 축약해서 사용할 수도 있다.