📝 2차원 변형

💡 transform

변형과 관련된 속성

• css 속성 작성 시 크로스 브라우저(브라우저가 달라지는 경우) 처리 방법
  • -ms- : 마이크로 소프트(익스플로러, 엣지)
  • -webkit- : 크롬, 사파리
  • -o- : 오페라
  • -moz- : 파이어폭스

📌 좌우로 움직이기

transform : translateX( 크기 );

(html은 이미지를 삽입한 코드로만 구성이 되어 있어 생략)

transform-style.css

img{
    width: 250px;
    height: auto;
    /* 이미지는 원래 자신만의 너비/높이를 가지고 있어
       한 방향의 크기만 지정해도
       남은 방향은 자동적으로 비율에 맞춰서 지정된다. */
}

/* 좌우 이동 */
.trans-x-2d:hover{
    -ms-transform       : translateX(100px);
    -webkit-transform   : translateX(100px);
    transform           : translateX(100px);
    /* translate : 바꾸다 */
}

📌 상하로 움직이기

transform : translateY( 크기 );

transform-style.css

/* 상하 이동 */
.trans-y-2d:hover{
    -ms-transform       : translateY(100px);
    -webkit-transform   : translateY(100px);
    transform           : translateY(100px);
}

📌 대각선(diagonal)으로 움직이기

transform : translateX(x축 값, y축 값);

transform-style.css

/* 대각선 이동 */
.trans-d-2d:hover{
    -ms-transform       : translate(100px, -100px);
    -webkit-transform   : translate(100px, -100px);
    transform           : translate(100px, -100px);
                                  /* x        y */
}

📌 가로 방향 확대/축소

transform : scaleX( 크기 );

transform-style.css

/* scale(배율) */
/* 가로 방향 확대/축소 */
.trans-x-scale-2d:hover{
    transform: scaleX(2);
    margin-left: 200px;
}

📌 세로 방향 확대/축소

transform : scaleY( 크기 );

transform-style.css

/* 세로 방향 확대/축소 */
.trans-y-scale-2d:hover{
    transform: scaleY(2);
    margin: 100px 0;
         /* 세로 가로 */
}

📌 요소 확대/축소(대각선)

transform : scale( 세로 값, 가로 값 );

transform-style.css

/* 요소 확대/축소 */
.trans-scale-2d:hover{
    transform: scale(2, 2);
    margin: 150px 150px;
          /* 세로 가로 */
}

📌 요소 회전

transform : rotate(각도 deg);

transform-style.css

/* 요소 회전 */
.trans-rotate:hover{
    transform: rotate(180deg);
}

📝 3차원 변형

💡 perspective

(z축의 길이) 원근법 적용

📌 x, y, z축 이동

transform : perspective(z축의 길이) translateZ( 크기 );

transform-style.css

/* x, y, z축 이동 */
.trans-3d:hover{
    transform: perspective(400px) translateZ(300px);   
}

📌 x축 회전

transform : perspective(z축의 길이) rotateX( 각도 deg );

transform-style.css

/* x축 회전 */
.trans-rotate-x-3d{
    transform: perspective(300px) rotateX(45deg);
}

📌 y축 회전

transform : perspective(z축의 길이) rotateY( 각도 deg );

transform-style.css

/* y축 회전 */
.trans-rotate-y-3d{
    transform: perspective(300px) rotateY(45deg);
}

📌 z축 회전

transform : perspective(z축의 길이) rotateZ( 각도 deg );

transform-style.css

/* z축 회전 */
.trans-rotate-z-3d{
    transform: perspective(300px) rotateZ(45deg);
}

📌 x, y, z축 회전

transform : perspective(z축의 길이) rotate3d(x, y, z, 회전 각도);
(x/y/z는 0~1 사이 숫자)

transform-style.css

/* x,y,z축 회전 */
.trans-rotate-3d{
    transform: perspective(300px) rotate3d(0.5, 0.5, 0.5, 45deg);
}

📝 변형 사이에 지연 시간 추가하기

💡 transition

📌 스타일 변형 진행 속도 조정

transition-duration: 시간;

📌 스타일 변형 딜레이(일정 시간 후 변형)

transition-timing-function: linear | ease(기본값) | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n);

transform-style.css

/* transition */
.box{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    background-color: red;

    /* 스타일이 변경되는 시간 지정 */
    transition-duration: 1s;
}

.test1:hover{
    background-color: yellow;
}

.test2{
    transition-duration: 3s;
}

.test2:hover{
    transform: rotate(360deg);
    background-color: cornflowerblue;

    /* 테두리 모서리 곡률 속성 */
    border-radius: 50%;
}

.test3{
    transition-duration: 3s;

    /*  linear | ease(기본값) | ease-in | ease-out | ease-in-out | cublic-bezier(n,n,n,n) */
    /* transition-timing-function: cubic-bezier(0.9, 0.4, 1, 0.9); */
    transition-timing-function: ease-in-out;
}

.test3:hover{
    background-color: cadetblue;
    transform: rotate(720deg);
}

.test4{
    transition-delay: 1s;
}

.test4:hover{
    transform: translateX(100px);
}