ABOUT ME

Today
Yesterday
Total
  • Transition 효과
    개발/css 2024. 9. 12. 20:40

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: width 2s, height 2s;
    }

    div:hover {
        width: 200px;
        height: 200px;
    }
    </style>
    </head>
    <body>

    <h3>Hover over the box!</h3>
    <div></div>

    </body>
    </html>

     

    다음 코드는 div에 마우스를 올리면 너비와 높이가 2초간 서서히 200px로 커지는 코드다.

     


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
        transition: transform 2s;
    }

    div:hover {
        transform: rotate(45deg);
    }
    </style>
    </head>
    <body>

    <h3>Hover to rotate!</h3>
    <div></div>

    </body>
    </html>

     

    이 코드는 div에 마우스를 올리면 2초간45도 정도의 각도를 돌리는 transform 효과가 작동된다.

     


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: green;
        transition: transform 2s;
    }

    div:hover {
        transform: skewX(20deg);
    }
    </style>
    </head>
    <body>

    <h3>Hover to skew!</h3>
    <div></div>

    </body>
    </html>

     

    이 코드는 마찬가지로 div에 마우스를 올리면 2초 동안 20도 정도 x축 방향으로 비틀어지는 transform 효과를 준다.

Designed by Tistory.