🐴 Transform (변형)

박스모델이나 normal-flow에 원래 있는 자리가 있는데 그 자리에서 회전, 기울이기, 움직이기 가능 !

변형을 오른쪽에서부터 왼쪽으로 하나씩 순서대로 적용

transform : rotate(10deg) translateY(5px)

→ translateY 먼저 적용, rotate 다음으로 적용이 된다.

1. scale() → 크기 조절

• 2D만을 위한 함수, 3D로 조절은 못한다 (sclale3d()라는 별도의 func가 있다.)

transform : scale(sx);

transform : scale(sx,sy);

scale(0.5)라고 하면 가로도 50%, 세로도 50% 줄어든다.

개발자 도구에서는 img 사이즈는 width, height는 그대로다.
scale은 그저 눈에 보여주기 위함이다.

2. rotate() → angle조절

<angle> 은 사실 자료형이다.

deg : degree를 의미한다.

• 45deg → 45도를 의미한다.

turn : 바퀴를 의미한다.

• 2turn → 2바퀴 돌린 것을 의미한다.

90deg = 0.25turn (1/4만큼 돌린 것이니까)

3. translate() → 이동을 담당

transform:translate(sx);

transform:translate(sx,sy);

scale과 마찬가지로 x축, y축 이동이 가능하다.
한가지만 입력한다고해서 x축 200px, y축 200px 움직이는 것이 아니라 (200px,0) 이라고 생각하면 된다.

4. skew() → 기울기

• rotate() 와 비슷하게 deg를 쓴다.

transform:skew(sx);

transform:skew(sx,sy);

값을 하나만 쓴 것은 skew(x,0); 을 한 것과 동일하다.
두개를 모두 쓴것은 x축으로 sx만큼 기울이고, y축으로 sy만큼 기울인 것이다.

5.transform-origin

• transform과 완전히 다른 property 로 사용한다.

transform-origin:top left;

👾 Transition

시간차를 통해 부드럽게 변경된다. (시간이라는 개념이 추가된다.)

1. transition-property

transition-property : none ; 아무런 변경하지 않겠다는 의미
transition-property : all; 모든 property 를 변경하겠다.
transition-property : margin-right; margin right를 변경하겠다.

2. transition-duration

: 얼마만큼의 시간이 지나고 바뀔 것인지

transition-duration : 500ms;
transition-property : margin-right;

margin-right에 효과를 500ms의 시간을 가지고 변경하겠다는 의미다.

transition-duration : 500ms, 600ms;
transition-property : margin-right, color;

margin right는 500ms , color는 600ms 걸린다는 의미다.
Unit : 1s=1000ms

- Example

.box{
  width:300px;
  height:80px;
  border: 2px dashed teal;
  background-color:darkslategray;
  font-size:50px;
  color:white;
  
  transition-property: all;
  /*모든 property를 변경하겠다는 의미*/
  transition-duration: 2s;
}

.box:hover{
  width:340px;
  background-color:indianred;
  font-size:60px;
}

만약 transition-property와 transition-duration을 .box:hover에 넣는다면 마우스 뗄 때 효과가 적용되지 않는다. (ex . 마우스떼고 2초뒤 원래대로 변경되는 효과 적용 X)

3. transition-delay

transition-delay 요소가 여러 개일때, 요소가 도미노처럼 변하는 효과를 줄 수 있다.

4. transition-timing-function

A에서 B상태로 변하는게 중간과정이 존재한다.
ex) 빨간색 -> 파란색으로 변한다면 중간과정은 보라색이 될 수 있다.

transition-timing-function : ease;
transition-timing-funtion : linear
: 변하는 속도가 선형적이게 일관적으로 변한다.

dynamic한 효과를 줄 수 있다.

- transition shortcut

. box{
...
...

transition-property: all;
transition-duration : 3s;
transition-delay: 1s;
transition-timing-funtion: ease-in-out;

으로 쓸 수 도 있지만,

. box{
...
...

transition: all 3s ease-in-out 1s;

로 한 줄에 쓸 수도 있다.
맨 앞에는 transition-property를 가장 먼저 쓴다 !

transition과 transform을 활용한 예제

.hover-ex{
  width:500px;
  height:300px;
  background-color: darkolivegreen;
  border-radius: 30px;
  
  transition: all 2s ease-in-out;
}

.hover-ex:hover{
  transform:rotate(360deg);
}