CSS // transform, transition

 

 

  <div class="anime_boxes">
    <div class="box1 box"></div>
  </div>

먼저 html

 

 

## transform 사용하기

 

# 이동을 해보자

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  transform: translateX(50px);
}

- translateX(값)

이건 x축으로 얼만큼 이동하겠는가

- translateY(값)

이건 y축으로 얼만큼 이동하겠는가

-translate(값1,값2)

이건 xy각각 얼만큼 이동하겠는가

 

 

# 크기를 조절해보자

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  transform: scaleX(2);
}

- scaleX(값)

값배만큼 X축으로 늘리자~

- scaleY(값)

값배만큼 Y축으로 늘리자~

- scale(값)

xy축으로 값배만큼 늘리자~

 

 

# 회전을 시키자

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  transform: rotate(50deg);
}

rotateX : x축으로 얼만큼 회전시킬래?

rotateY : Y축으로 얼만큼 회전시킬래?

rotateZ : Z축으로 얼만큼 회전시킬래?

뭐 이런식으로 각각 축으로 회전하는거다.

그냥 rotate만 쓰면 z축 회전이 기본값이 된다.

 

 

 

# 입체적으로 rotate쓰기

부모요소에 perspective요소를 주면 된다.

.anime_boxes {
  perspective: 100px;
}

저 값이 클때마다 멀리있는 느낌

작을때마다 가까운 느낌임.

 

- perspective가 500px일때

- perspective가 100px일때

응 짤림 ㅡㅡ

 

 

#왜곡을 시켜보자

skewX

skewY

skewZ

 

 

 

 

## Transition

.box1:hover {
  width: 200px;
  height: 200px;
}

마우스를 박스1에 올렸을때 width height가 200px이 되게 한다.

 

.box1 {
  transition-property: width, height;
  transition-duration: 2s;
}

이렇게 트랜지션을 추가하면 2초동안 width height가 증가감소한다.

 

.box1 {
  transition-property: width, height;
  transition-duration: 2s;
  transition-timing-function: linear;
}

- transition-timing-function : linear 

일정한 속도로 변화,

- transition-timing-function : ease-in

천천히->빠르게 변화

- transition-timing-function : linear 

빠르게->천천히 변화

 

# 단축표현 

.box1 {
  transition: all 2s ease-out;
}

all안적으면 디폴트로 all지정됨.