CSS - transform, transition

2d로 요소 변형하기

transform

• 요소에 이동, 회전, 배율, 기울이기 등 변형을 준다.

• 값으로 css 변형 함수를 사용한다.

• x축, y축, z축 적용한다.

• 값에 따라 상대값, 절대값 모두 사용 가능하다.

  값	설명
  translate()	요소를 이동시킨다.
  scale	요소의 배율을 조절한다.
  rotate	요소를 회전시킨다.
  skew	요소를 기울인다.

---

1. translate

• 요소를 이동시킨다.

• 음수값을 지정하면 반대 방향으로 이동한다.

  값	설명
  translateX()	요소를 x축을 방향으로 이동시킨다.
  translateY()	요소를 y축을 방향으로 이동시킨다.
  translate()	요소를 x,y축을 방향으로 이동시킨다.

  .box {
  	/* 요소를 x축 방향으로 100px만큼 이동 */
  	transform : translateX(100px);
      
      /* 요소를 y축 방향으로 50px만큼 이동 */
      transform : translateY(50px);
      
      /* 요소를 x축 방향으로 100px만큼 이동 */
      transform : translate(100px, 50px);
      
      /* trnaslate(30px)은 translate(30px, 0) 과 동일하게 동작 */
      transform : translate(20px);
      
      /* 요소를 x축 반대 방향(오른쪽)으로 -30p x이동 */
      transform : translateX(-30px);
  }

  ---

2. sclae()

• 요소를 확대 혹은 축소시킨다.

• 음수값 입력시 요소가 반전된다.

  |값|설명|
  |--|--|
  |scaleX()|요소를 x축 배율을 조절한다.|
  |scaleY()|요소를 Y축 배율을 조절한다.|
  |scale()|요소를 x축과 y축 배율을 조절한다.|

  .box {
   	width: 200px;
      height : 200px;
      
      /* 요소의 x축 배율을 1.1배로 확대 */
   	transform : scaleX(1.1);
      
      /* 요소의 y축 배율을 90%로 축소  */
      transform : scaleY(90%);
      
      /* 요소의 x축 배율은 50%로 축소, y축 배율은 1.1배로 확대 */
      transform : scale(50%, 1.1);
      
      /* 요소를 0.9배로 축소 및 반전*/
   }

  ---

3. rotate

• 요소를 회전시킨다.

• 양수값 입력시 시계 방향으로, 음수값 입력시 반시계 방향으로 회전된다.

• deg(각도) 단위를 사용한다.

  .box {
  	/* 요소를 시계 방향으로 30도만큼 회전 */
  	transform : roate(30deg):
     
     /* 요소를 반시계 방향으로 90도만큼 회전 */
  	transform : roate(-30deg):
  }

4. skew

• 요소를 기울인다.
• rotate처럼 deg 단위를 사용.

  .box {
  	/* x축 방향으로 20도 기울임 */
  	transform : skewX(20deg);
      
      /* y축 방향으로 30도 기울임 */
      transform : skewY(30deg)
      
      /* x축 방향으로 15도, y축 방향으로 30도 기울임 */
      transform : skew(15deg, 30deg);
  }
  

---

3d로 요소 변형하기

perspective

• 관점이라는 뜻으로 요소를 보는 원근감을 지정한다.

• perspective를 지정하지 않으면 3d로 변형시 의도대로 표시되지 않는다.

• 변형하는 요소의 상위 요소에 사용한다.

• 입력값이 클수록 멀리서 보는 효과를 준다.

  .container {
  	 	/* 300px 거리에서 보는 효과 */
  	 	perspective : 300px;
  }
  .box {
  		width: 50px;
      heigth : 50px;
      
      /* z축 방향으로 30px 이동 */
      transform : translateZ(30px);
  }

transition

transition

• 일정 시간에 걸쳐 속성을 변화시킨다.
• 다음 속성들의 단축속성이다.

1. transition-duration

• 트랜지션이 적용되는 시간(몇초에 걸쳐 변화할지)을 지정한다.
• transition-duration은 무조건 지정하여야한다.
• ms, s 와 같이 시간 단위로 지정한다.

2. transition-property

• transition을 적용할 속성을 지정한다.
• ,를 통해 여러 속성을 지정할 수 있다.

값	설명
all	기본값. 모든 속성에 트랜지션을 적용한다.
none	트랜지션을 적용하지 않는다.
<속성명>	특정 속성에만 트랜지션을 적용한다. ,를 통해 여러 속성을 지정할 수 있다.

/* 기본값. 모든 속성에 트랜지션을 적용한다. */
transition-property: all;

3. transition-delay