transform / transition

KHW·2021년 7월 6일

CSS

목록 보기

7/16

transform (변형)

요소를 변형시키는 프로퍼티

translate() => 이동

scale() => 확대 축소

rotate() => 회전

skew() => 경사

translate

translate(x,y)

translateX(x)

translateY(y)

ex) transform : translate(50px, 30px);

scale

scale(x,y)

sacleX(x)

scaleY(y)

ex) transform : scale(1,1.5);

rotate

rotate(각도)

ex) transform : rotate(45deg);

skew

skew(x,y)

skewX(x)

skewY(y)

ex) transform : skew(30deg,0);

transition(트랜지션 애니메이션)

점진적으로 값을 변화시킴

ex)

<style>
        div{
            background-color: orange;
            width:100px;
            height:100px;
            -webkit-transition: width 1s;
            transition: width 1s;
        }
        div:hover { width: 300px; }
    </style>
</head>
<body>
    <div></div>
 </body>

주의 : <div style="width:100px;height:100px;"></div> 처럼 수정하면 정상적으로 동작하지 않는다.

transition 과 transform 전부 사용

<style>

    #windmill {

        height: 100px;

        width: 100px;

        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

        transition: width 2s, height 2s, transform 2s;

    }

    #windmill:hover {

        width: 300px;

        height: 300px;

        -webkit-transform: rotateY(180deg);

        transform: rotateY(180deg);

    }

</style>