CSS 트랜스폼을 이용한 트랜지션 예제

1. 버튼

 

div {

    width: 100px;

    height: 100px;

    background-color: mistyrose;

    transition-property: transform;

    transition-duration: 300ms;

    transform: scale(1); 

}

 

div:hover {

    transform: scale(1.1); /* 마우스를 올려 놓을 때 크기가 부드럽게 살짝 커진다. */

}

 

2. 시계

 

div {

    width: 100px;

    height: 100px;

    position: relative;

    background-color: antiquewhite;

    /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */

    animation-name: rotate;

    animation-duration: 60s;

    animation-timing-function: linear;

    animation-iteration-count: infinite; /* 반복 횟수 */

}

 

@keyframes rotate {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}

 

참고 : https://poiemaweb.com/css3-transform