변형 관련 CSS

transform 변형 관련 속성

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

이미지는 원래 자기만의 너비와 높이가 있다.
한 방향의 크기만 지정해도
남은 방향은 자동적으로 비율에 맞춰서 지정된다.
-> height : auto / width : auto

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

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

/* 대각선 이동 */
.trans-d-2d:hover{
    transform: translate(100px, -100px);
    transition: 0.8s;
}

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

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

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

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


/* x,y,z축 이동 */
.trans-3d:hover{
    transform: perspective(300px) translate3d(50px,50px,100px);
    /* perspective(z축 길이) : 원근법 적용 */
}




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


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


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

/* x,y,z축 회전 */
.trans-rotate3d:hover{
    transform: perspective(300px) rotate3d(0.5, 0.5, 0.5, 45deg);
    /* 
        rotate3d(x,y,z 회전각도)
        x,y,z에는 0 ~ 1 사이 숫자
     */
}

/* transition */

.box{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    background-color: pink;

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


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

.test2{
    transition-duration: 3s;
}

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

    border-radius: 50%;
}


.test3{
    transition-duration: 3s;


    transition-timing-function: ease-in-out;

}

.test3:hover{
    background-color: springgreen;
    transform: rotate(1080deg);

}

.test4{
    transition-delay: 2s;
}

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