CSS transform 정리

CSS transform과 관련된 속성 살펴보기

transform: translate(x,y)

x(가로), y(세로) 지정한만큼 위치 이동

transform: rotate(deg)

입력값 만큼 회전한다

ex) transform: rotate(20deg) -> 20도 회전

transform: scale(x,y)

가로(x)와 세로(y)가 입력값만큼의 비율로 크기가 변함

ex) transform: sclae(1.5, 0.6) ->가로1.5배 세로0.6배

transform: skew(x deg, y deg)

입력값만큼 x축과 y축을 기울인다

 

 

 

CSS transition

transition: 속성(폰트사이즈, width, height, color...등등) 변형을 위해 사용한다 

 

ex)

#tran{
    transition: width 1s, background 8s, transform 5s;
}
#tran:hover{
    width: 800px;
    background-color: blue;
    transform: translate(300px,0px);