[html][css] transform 2D속성 / 이동, 크기 변환, 회전, 기울기

transform

요소의 변환 효과 (변형)을 지정

transform 속성은 하나고 여러가지 값을 적을 수 있음

여러 함수들이 존재한다.

 

2D속성

translate : 이동

 - translate(x, y)

 - translate(x)

 - translate(y)

scale : 크기

 - scale(x, y)

 - scale(x)

 - scale(y)

rotate(degree) : 회전

skew : 기울기

 - skew(x-deg, y-deg)

 - skew(x-deg)

 - skew(y-deg)

martrix(n,n,n,n,n,n) : 모두 아우르는 것

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

.box{
  width:100px;
  height: 300px;
  background: gray;
  margin: 300px;
  transform: rotate(45deg) ;
}
.box:hover{
  width:300px;
  background: dodgerblue;
}

.box{
  width:100px;
  height: 300px;
  background: gray;
  margin: 300px;
  transition: 1s;
}
.box:hover{
  transform: scale(1.5);
}

 

.box:hover{
  transform: skewx(45deg);
}