아주 쉬운 CSS - Transform, Transition, Hover

Transform, Transition, Hover에 대해 알아보자!

Transform

Transform 속성 종류

rotate
scale
skew
translate

---

rotate(##deg)

입력한 각도만큼 회전, 음수 입력 가능

<style>
  .transition{
    transform: rotate(45deg);
  }
</style>

 

scale(x,y)

숫자 = 비율, width를 x 배, height를 y 배 확대

<style>
  .transition{
    transform: scale(2,3);    
  }
</style>

 

skew(x deg, y deg)

x축, y축을 기준으로 입력한 각도만큼 비틂

<style>
  .transition{
    transform: skew(10deg, 10eg);
  }
</style>

 

translate(x px, y px)

선택 오브젝트의 좌표변경

<style>
  .transition{
    transform: translate(10px, 10px);
  }
</style>

 

prefix 접두사

다른 버전의 브라우저에서 실행을 원할 경우

<style>
  .transition{
    -webkit-transform: translate(10px, 10px);    /* 크롬, 사파리 */
    -moz-transform: translate(10px, 10px);        /* 파이어폭스 */
    -ms-transform: translate(10px, 10px);        /* 익스플로러 9.0 */
    -o-transform: translate(10px, 10px);        /* 오페라 */
  }
</style>

---

Transition

Transition 속성 종류

property

duration

timing-function

delay

---

property

효과를 적용하고자 하는 css속성

<style>
  .transition{
    transition-property: width;
  }
</style>

 

duration

효과가 나타나는데 걸리는 시간

<style>
  .transition{
    transition-duration: 2s;
  }
</style>

 

timing-function

효과의 속도

<style>
  .transition{
    transition-timing-function: linear;    /* linear: 일정하게 */
  }
</style>

 

delay

특정 조건 하에서 효과 발동

<style>
  .transition{
    transition-delay: 1s;    /* 1s: 1초 후 */
  }
</style>

---

가상 선택자 Hover

css에서 미리 만들어 놓은 클래스로 마우스를 올렸을 때라는 조건을 가지고 있다.

<style>
    .transition: hover{width: 10px;}
</style>

---

위 모든 css 속성을 합친다면
마우스를 올리면 1초 후에 width 값이 300px로 2초 동안 일정한 속도로 변하는 애니메이션 효과를 가진 다음의 코드를 짤 수 있다.

<style>
    .transition{width 2s linear 1s;}
    .transition: hover{width: 10px;}    
</style>