Github 참고

transform (변형)

transfrom : 2D, 3D 공간에서 변형할 때 사용하는 효과로 , 요소의 위치, 크기, 회전, 비율을 변하게 할 수 있습니다.

1. transform 속성

1. translate(x,y)

요소를 현재 위치에서 x(x축),y(y축) 만큼 이동합니다.

2. translateX(n)

요소를 현재 위치에서 n만큼 x축으로 이동합니다.

3. translateY(n)

요소를 현재 위치에서 n만큼 y축으로 이동합니다.

4. scale(x,y)

요소를 x(x축), y(y축) 만큼 확대, 축소합니다.

5. scaleX(n)

요소를 n만큼 x축으로 확대, 축소합니다.

6. scaleY(n)

요소를 n만큼 y축으로 확대, 축소합니다.

7. skew(xdeg,ydeg)

요소를 x축과 y축으로 xdeg,ydeg(각도) 만큼 기울입니다.

8. skewX(deg)

요소를 deg(각도)만큼 x축 방향으로 기울입니다.

9. skewY(deg)

요소를 deg(각도)만큼 y축 방향으로 기울입니다.

10. retate(deg)

요소를 deg(각도)만큼 회전합니다.
요소의 중심을 기준으로 회전합니다.

.box {
	width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 50px;
}

.first:hover{
	background-color: yellow;
    transform: translate(100px,200px);
}

.second:hover{
	background-color: green;
    transform: scale(1.5,1.5);
}

.third:hover{
	background-color: blue;
    transform: skew(30deg,30deg);
}

.fourth:hover{
	background-color: aqua;
    transform: rotate(30deg);
}


<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
<div class="box fourth"></div>

2. transform-origin 속성

rotate 속성의 기준점을 변경시키는 속성

.fifth:hover {
	background-color: purple;
    transform: rotate(30deg);
    transform-origin: top right;
}
        
<div class="box fifth"></div>