transform

• translate
• scale
• rotate
• skew

translate(위치이동)

        .move > div:nth-of-type(1){
            transform: translateX(100px);
        }
        .move > div:nth-of-type(2){
            transform: translateX(-100px);
        }
        .move > div:nth-of-type(3){
            transform: translateY(-100px); /* 음수가 위, 양수가 아래 */
        }
        .move > div:nth-of-type(4){
            transform: translateX(100px) translateY(100px);
        }
        .move > div:nth-of-type(5){
            transform: translateZ(100px);
        }
        .move > div:nth-of-type(6){
            transform: translateZ(-100px); /* 지금은 티가 나지 않지만 회전하면 알 수 있음*/
        }
        .move > div:nth-of-type(7){
            transform: translate(250px, -200px); 
        }
        .move > div:nth-of-type(8){
            transform: translate3d(-150px, -100px, 100px); 
                                    /* X,     Y,     Z*/
        }
        .move > div:nth-of-type(9){
            transform: translateX(100%);
            /* 자신의  x(width)를 100% 기준하여 이동*/
        }
        .move > div:nth-of-type(10){
            transform: translate(400%, -300%);       
        }

translateX

⌨️ 문법

transform: translateX(50px);

• x축 위치이동
• 양수 : 오른쪽
• 음수 : 왼쪽

translateY

⌨️ 문법

transform: translateY(50px);

• y축 위치이동
• 음수 : 위
• 양수 : 아래

translateZ

⌨️ 문법

transform: translateZ(50);

• z축 위치이동
• 단, Z축 이동이라 티가 나지 않지만 회전과 섞이면 티가 남

translate3D

⌨️ 문법

transform: translate3D(-100px, 100px, 150px);

• x, y, z축 위치이동

translate

⌨️ 문법

transform: translate(x, y);

• x, y축 위치이동

rotate(회전)

• 단위: deg(일반적으로 사용하는 각도), rad, turn, grad

.rotate > div:nth-of-type(1){
            transform: rotateZ(30deg);
            /* 단위: deg(일반적으로 사용하는 각도), rad, turn, grad */
        }
        .rotate > div:nth-of-type(2){
            transform: rotateZ(-30deg);
        }
        .rotate > div:nth-of-type(3){
            transform: perspective(100px) rotateX(60deg) ;
        }
        .rotate > div:nth-of-type(4){
            transform: rotateY(60deg);
        }
        .rotate > div:nth-of-type(5){
            transform: rotate(60deg); /* rotateZ와 같음 */
        }
        .rotate > div:nth-of-type(6){
            transform: rotate3d(0,0,1,60deg); /* rotateZ와 같음 */
            /* 
            x, y, z 각도
            x, y, z 는 회전축의 벡터
            중요한 값은 맨 마지막 각도값
            */
        }
        .rotate > div:nth-of-type(7){
            transform: rotate3d(1,0,0,60deg); 
            /* 
            x, y, z 각도
            x, y, z 는 회전축의 벡터
            중요한 값은 맨 마지막 각도값
            */
        }
        .rotate > div:nth-of-type(8){
            transform: rotate3d(0,1,0,60deg); 
            /* 
            x, y, z 각도
            x, y, z 는 회전축의 벡터
            중요한 값은 맨 마지막 각도값
            */
        }
        .rotate > div:nth-of-type(9){
            transform: rotate3d(1,1,1,60deg);
            /* 
            x, y, z 각도
            0,0,0 -> 1,1,1의 선을 연장선으로 하는 축으로 60deg 회전
            */
        }
        .rotate > div:nth-of-type(10):hover {
            transform: rotate3d(1,1,0,60deg);
            transition: all 2s;
            /* 
            x, y, z 각도
            0,0,0 -> 1,1,1의 선을 연장선으로 하는 축으로 60deg 회전
            */
        }
        .rotate > div:nth-of-type(11){
            transform: rotate(60deg);
            transform-origin: top left;
        }
        .rotate > div:nth-of-type(12){
            transform: rotate(60deg);
            transform-origin: top right;
        }
        .rotate > div:nth-of-type(13){
            transform: rotate(60deg);
            transform-origin: bottom left;
        }
        .rotate > div:nth-of-type(14){
            transform: rotate(60deg);
            transform-origin: bottom right;
        }

rotateZ

⌨️ 문법

transform: rotateZ(30deg);

• z축을 회전축으로 회전
• 양수: 시계방향
• 음수: 반시계방향

rotateX

⌨️ 문법

transform: rotateX(30deg);

• x축을 회전축으로 회전
• 양수: 시계방향
• 음수: 반시계방향

rotateY

⌨️ 문법

transform: rotateY(30deg);

• y축을 회전축으로 회전
• 양수: 시계방향
• 음수: 반시계방향

rotate3D

⌨️ 문법

transform: rotate3D(1,0,0,60deg);

• x, y, z 는 회전축의 벡터

rotate

⌨️ 문법

transform: rotate(30deg);

• z축을 회전축으로 회전
• rotateZ와 같음

회전을 하는 중심 변경

⌨️ 문법

transform: rotate(60deg)
transform-origin: top right;

• x, y, z 는 회전축의 벡터

scale

        .scale > div:nth-of-type(1){
            transform: scaleX(2); /* 0 < 1(기본) < 2.... */
                        /* 2배  */
        }
        .scale > div:nth-of-type(2){
            transform: scaleX(0.5); 
                        /* 0.5배 */
        }
        .scale > div:nth-of-type(3){
            transform: scaleY(0.5); 
                        /* 0.5배 */
        }
        .scale > div:nth-of-type(4){
            transform: scaleZ(0.5); 
                        /* 0.5배 */
        }
        .scale > div:nth-of-type(5){
            transform: scale3D(2,0.3,1.5); 
                            /* x, y, z */
        }
        .scale > div:nth-of-type(6){
            transform: scale(2,0.3); 
                            /* x, y*/
        }
        .scale > div:nth-of-type(7){
            transform: translate(200px, -100px)
                        rotate(45deg)
                        scale(0.7,2); 
            transform-origin: top left;
        }

scaleX

⌨️ 문법

transform: scaleX(2);

• x축 확대 혹은 축소

scaleY

⌨️ 문법

transform: scaleY(0.5);

• y축 확대 혹은 축소

scaleZ

⌨️ 문법

transform: scaleZ(0.5);

• z축 확대 혹은 축소

scale3D

⌨️ 문법

transform: scale3D(1,2,3);

• x축, y축, z축 각각 확대 혹은 축소

scale

⌨️ 문법

transform: scale(1,2);

• x축, y축 각각 확대 혹은 축소

transform 여러 개 한 번에 적용

⌨️ 문법

transform: translate(100px,200px)
			rotate(45deg)
            scale(0.3,1.3);
transform-origin: top left;

• transform 한 번 적고 이어서 작성

skew

        .skew > div:nth-of-type(1){
        transform: skewX(30deg); /*x축 기준 30도 기울이기 */
        }
        .skew > div:nth-of-type(2){
        transform: skewY(30deg); /*y축 기준 30도 기울이기 */
        }
        .skew > div:nth-of-type(3){
        transform: skew(30deg, 15deg); /*y축 기준 30도 기울이기 */
        }

skewX

⌨️ 문법

transform: skewX(20deg);

• x축 비틀기

skewY

⌨️ 문법

transform: skewY(20deg);

• y축 비틀기

skew

⌨️ 문법

transform: skew(20deg, 20deg);

• xy축 비틀기

perspective

.rotate > div:nth-of-type(3){
            transform: perspective(100px) rotateX(60deg) ;

⌨️ 문법

transform: perspective(100px);

• x축, y축 각각 확대 혹은 축소
• 입체감 perspective(100px) 먼저 적용할 것
• 100px이 의미하는 것은 대상체와 시점과의 거리로 작을수록 왜곡율이 심함