10. Transform, Transition

transform

transform 속성은 HTML 요소를 이동 효과, 크기 조절, 회전, 기울이기를 나타낼 때 사용합니다.

사용은 속성 값으로 특수한 함수를 넣어주면 됩니다.

 

 

transform 속성 값

• translate(x, y) - 지정한 크기만큼 x축, y축으로 이동합니다.
• translateX(x) - 지정한 크기만큼 x축으로 이동합니다.
• translateY(y) - 지정한 크기만큼 y축으로 이동합니다.
• scale(x, y) - 지정한 크기만큼 x축과 y축으로 확대·축소합니다.
• scaleX(x) - 지정한 크기만큼 x축으로 확대·축소합니다.
• scaleY(x) - 지정한 크기만큼 y축으로 확대·축소합니다.
• rotate(각도) - 지정한 각도만큼 회전합니다. (+시계방향, -시계반대방향)
• rotateX(각도) - x축을 기준으로 회전합니다. perspective 속성을 부모 요소에 적용하면 입체감 있게 표현됩니다.
• rotateY(각도) - y축을 기준으로 회전합니다. perspective 속성을 부모 요소에 적용하면 입체감 있게 표현됩니다.
• rotateZ(각도) - z축을 기준으로 회전합니다. perspective 속성을 부모 요소에 적용하면 입체감 있게 표현됩니다.
• skew(x, y) - 지정한 각도만큼 x축과 y축으로 왜곡합니다.
• skewX(x) - 지정한 각도만큼 x축으로 왜곡합니다.
• skewY(x) - 지정한 크기만큼 y축으로 왜곡합니다.

 

 

transition

transition은 요소가 스타일 적용으로 인해 변환할 때 더욱 부드럽게 전환할 수 있도록 도와주는 속성입니다.

 

 

 

Transition 속성

 

transition-property

• 어떤 속성에 트랜지션 효과를 줄 것인지 지정합니다.
• transitino-property: <속성1>, <속성2>; 와 같이 지정할 수 있습니다.
• all - 모든 속성을 지정합니다. (all은 생략 가능합니다.)
• none - 아무것도 지정하지 않습니다.

transition-duration

• 트랜지션 효과를 몇 초 동안 실행할 것이지 지정합니다.

transition-delay

• 지정한 초 만큼 기다렸다가 실행할 때 사용합니다.

transition-timing-function

• 트랜지션이 시작하면서 끝날때의 속도를 지정합니다.
• linear - 트랜지션의 시작과 끝의 속도가 일정합니다.
• ease-in - 천천히 시작했다가 완료될 때 속도가 증가합니다.
• ease-out - 빨리 시작했다가 완료될 때 속도가 낮아집니다.

transition

• 단축속성으로 위 속성을 한꺼번에 표기할 수 있습니다.
• 예) transition: all 2s 1s ease-in; (all 생략가능)

 

 

---

실습

<!-- HTML -->
<div class="line">
  <div class="box1"></div>
</div>
<div class="line">
  <div class="box2"></div>
</div>
<div class="line rotate">
  <div class="box3"></div>
</div>
<div class="line">
  <div class="box4"></div>
</div>

/* CSS */
.line {
  border: 3px solid black;
  width: 100px;
  height: 100px;
  margin: 20px auto;
}

div[class*="box"] {
  background-color: orange;
  width: 100px;
  height: 100px;
}

.box1 {
  transform: translate(20px, 10px);
}

.box2 {
  transform: scale(2, 0.5);
}

.box3 {
  transform: rotate(45deg);
}
.rotate {
  perspective: 50px;
}

.box4 {
  transform: skew(30deg);
}

.box1:hover {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all 2s 1s ease-in;
  transform: rotate(160deg);
}