🤥변형 관련 스타일

2차원 변형

transform : 변형과 관련된 속성

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

좌우로 움직이기

<img src="../images/cats/cat1.jpg" class="trans-x-2d">

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

상하로 움직이기

<img src="../images/cats/cat2.jpg" class="trans-y-2d">

.trans-y-2d:hover {
    transform: translateY(100px);
}

대각선 움직이기

<img src="../images/cats/cat3.jpg" class="trans-xy-2d">

.trans-xy-2d:hover {
    transform: translate(100px, -100px);
} /*(x축, y축)*/

가로방향 확대/축소

<img src="../images/cats/cat4.jpg" class="trans-x-scale-2d">

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

새로방향 확대/축소

<img src="../images/cats/cat5.jpg" class="trans-y-scale-2d">

.trans-y-scale-2d:hover {
    transform: scaleY(2);
    margin-left: 200px;
}

대각선 확대/축소

<img src="../images/cats/cat1.jpg" class="trans-scale-2d">

.trans-scale-2d:hover {
    transform: scale(2,2);
    margin: 150px 150px; 
} 

요소 회전

<img src="../images/cats/cat2.jpg" class="trans-rotate">

.trans-rotate:hover {
    transform: rotate(180deg);
}

3차원 변형

x, y, z축 이동

<img src="../images/dogs/dog1.jpg" class="trans-3d">

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

x축 회전

<img src="../images/dogs/dog2.jpg" class="trans-rotate-x-3d">

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

y축 회전

<img src="../images/dogs/dog3.jpg" class="trans-rotate-y-3d">

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

z축 회전

<img src="../images/dogs/dog4.jpg" class="trans-rotate-z-3d">

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

변형 사이에 지연 시간 추가하기 (transition)

예시1

 <div class="box test1"></div>

.box {
    width: 150px;
    height: 150px;
    background-color: red;
    border: 1px solid black;
}
.test1:hover {
    background-color: yellow;
    transition-duration: 1s;
    /* 1초동안 변함 */
} /*hover했을 때 duration을 줘서 들어올 때만 움직임*/

예시2

<div class="box test2">여기가 위쪽</div>

.test2:hover {
    transform: rotate(360deg);
    background-color: skyblue;
    /* 테두리 모서리 곡률 속성 */
    border-radius: 50%;
}
.test2 {
    transition-duration: 3s;
} 

💡 transition-duration을 따로 줬기 때문에 들어올 때 나갈 때 둘 다 적용됨

스타일 변형 진행 속도 조정

<div class="box test3">여기가 위쪽</div>

.test3 {
    transition-duration: 5s;
    transition-timing-function: ease-in-out;
}
.test3:hover {
    background-color: springgreen;
    transform: rotate(720deg);
}

💡ease(기본값) /ease-in (천천히 들어왔다)/ease-out (천천히 나가라) / linear(등속)

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

<div class="box test4">여기가 위쪽</div>

.test4:hover {
    transform: translateX(100px);
    /* y축으로 100픽셀 이동 */
}

.test4{
    transition-delay: 2s;
}