TransForm

scale()

- 평면에서의 요소를 확대

 

사용법

 scale(가로 비율, 세로비율) 

 scaleX(가로 비율) 

 scaleY(세로비율) 

 

이 코드대로 실행하면

.box:hover {
            transform:scale(2);
            /*2배 확대*/
        }

 

이런 식으로 만들어짐

scale(2)

 

rotate()

- 지정 요소를 회전

 

사용법

회전값 : +  ➔ 시계방향

회전값 : -  ➔ 반시계방향

 

➔ N은 각도를 의미

rotate(Ndeg) 

rotateX(Ndeg) 

rotateY(Ndeg) 

 

이 코드대로 실행하면

   .box:hover {
            transform:rotate(45deg);

        }

rotate(45deg)

 

skew()

- 비틀기

 

사용법

회전값 : +  ➔ 시계방향

회전값 : -  ➔ 반시계방향

 

➔ N은 각도를 의미

skew(Ndeg) 

skewX(Ndeg) 

skewY(Ndeg) 

 

이 코드대로 실행하면

   .box:hover {
            transform: skew(30deg);
           
        }

 

skew

translate()

- 위치이동

 

사용법

translate(크기, 크기) 

translateX(크기) 

translateY(크기) 

translateZ도 있음 --> 나중에 3D 배워야 의미가 있으므로 나중에

 

이 코드대로 실행하면

   .box:hover {
          transform:translate(30px, 10px);
        }

 

translate

 

transform-origin

- 기준점 변경

 

사용법

transform-origin: 좌우, 상하;

 

처음에 scale만 했을 때는 기준점은 사각형 중심에 있다.

.box:hover {
            transform:scale(1.5);
            /*1.5배 확대*/
        }

450

그런데

이런식으로 transform-origin을 이용하면 기준점을 변화시킬 수 있다.

.box:hover {
            transform:scale(1.5);
            /*1.5배 확대*/
            transform-origin: left top;
        }

 

사용법

 

transform-origin: 가로방향%, 세로방향%; 

숫자로도 기준점을 변형시킬 수 있는데 왼쪽 위를 기준으로 보면 된다.

 

코드를 실행시키면

        .box:hover {
            transform:scale(1.5);
            transform-origin: 0% 0%;
        }