[DAY - 15] transform, transitions

• transform
• transitions

1) transform

 

위치를 이동시키거나 크기를 늘이거나 줄이고, 회전, 기울기를 줄 때 사용한다.

 

 

    <style>
        .box {
            margin: 10px;
        }
        .box div {
            width: 80px;
            height: 80px;
            font-size: 40px;
            text-align: center;
            line-height: 2;
            background: tan;
            margin-bottom: 10px;
            position: relative;
        }
        .box div:nth-child(1) {
            /* transform: translateX(100px); */
            /* transform: translateY(-50px); */
            /* transform: translate(100px, -50px); */
            background: pink;
            transform: translate(-50%, -50%);
            /* %는 자기 사이즈 만큼 */
        }
        .box div:nth-child(2) {
            transform: translateX(100%);
        }
        .box div:nth-child(3) {
            left: 300px;
            /* transform: scale(4,3); */
            transform: scaleX(2);
            transform: scaleY(3);
        }
        .box div:nth-child(4) {
            left: 100px;
            background: tomato;
            transform: rotate(45deg);
        }
        .box div:nth-child(5) {
            font-size: 80px;
            line-height: 80px;
            font-weight: 800;
            color: deeppink;
            transform: rotateX(60deg);
            transform: rotateY(50deg);
        }
        .box div:nth-child(6) {
            transform: skewX(30deg);
     
        }
        .box div:nth-child(7) {
            transform: 
            translateX(200px) 
            rotateX(40deg)
            skew(20deg, 10deg);
        }
    </style>

1번 박스의 transform: translate는 자기 자신의 위치를 기준으로 이동하며 translate(x, y) 혹은 translateX(x) translateY(y)

로 각각 x축, y축을 적용시킬 수 있다.

 

2번 박스는 translateX가 적용된 모습.

 

3번 박스의 scale은 너비와 높이를 늘이거나 줄일 때 사용하는데 scale(너비, 높이) 혹은 scaleX(너비) scaleY(높이)로 적용할 수 있다.

 

4번 박스의 rotate는 회전을 시킬 수 있는데 360도 기준으로 deg값을 양수 혹은 음수가 사용 가능하다.

5번 박스 처럼 rotateX, rotateY로 X축 회전 Y축 회전을 따로 시킬 수 있다.

 

6번 박스의 skew로는 기울기를 줄 수 있다. 마찬가지로 skewX로는 x축, skewY로는 y축으로 기울일 수 있다.

 

 

2) transition

 

반응형을 구현할 때 사용한다.

 

    <style>
        div {
            width: 100px;
            height: 100px;
            background: tan;
            margin: 10px;
            position: relative;
            cursor: pointer;
        }
        /* div에 커서 올려 놓았을 때 */
        /* 부드럽게, 자연스럽게 : transitions */
        div:hover {
            width: 300px;
            transition-property: width;
            transition-duration: 1s;
            transition-timing-function: ease-in-out;
        }
    </style>

 

 

너비 100px의 div에 마우스를 가져다 대면 (:hover) 1초 안에 300px로 늘어나게 된다. ease-in-out는 애니메이션 효과 방식.

 

 

    <style>
        div {
            width: 100px;
            height: 100px;
            background: tan;
            margin: 10px;
            position: relative;
            cursor: pointer;

            /* transition : 속성 시간 효과 지연시간 */
            transition: all 1s ease-in-out 0s;
        }
        div:hover {
            background: tomato;
            transform: rotate(45deg) scale(2) translateX(100px);
            border-radius: 50%;
        }
    </style>

 

background의 color가 토마토색으로 바뀌며, rotate(45deg) 45도만큼 회전을 하고, scale(크기)은 2배, x축 기준으로 100px 이동하면서 border-radius 때문에 원 모양으로 바뀌게 된다.

 

 

        .box div:last-child {
            margin-bottom: 0;
        }
        .box div:nth-child(1) {
            transition: all 1s ease;
        }
        .box div:nth-child(1):hover {
            background: orange;
            width: 550px;
        }
        .box div:nth-child(2) {
            transition: all 1s ease-in;
        }
        .box div:nth-child(2):hover {
            background: orange;
            width: 550px;
        }
        .box div:nth-child(3) {
            transition: all 2s ease-out;
        }
        .box:hover div:nth-child(3) {
            background: orange;
            width: 200px;
        }
        .box div:nth-child(4) {
            transition: all 3s ease-in-out;
        }
        .box:hover div:nth-child(4) {
            background: orange;
            width: 550px;
        }
        .box div:nth-child(5) {
            transition: all 1s linear;
        }
        .box:hover div:nth-child(5) {
            background: orange;
            width: 300px;
        }
        .box div:nth-child(6) {
            transition: all 1s cubic-bezier(1,0,0,1);
        }
        .box:hover div:nth-child(6) {
            background: orange;
            width: 500px;
        }
    </style>

 

각각 늘어나는 길이와 걸리는 시간, 방식을 다르게 해놓았다.

밑의 4개의 박스는 부모인. box에 :hover를 걸어 놓았으므로 부모 박스에 커서를 가져다 대면 반응한다.

* 위의 첫 번째, 두 번째 박스처럼 직접 :hover를 사용할 수 있지만 아래 방식처럼 부모에 :hover를 사용하는 걸 추천한다고 배웠다.