Transform 변형

transform:scale

: 크기의 변형

<style>
  h1{
     transform:scaleX(2) scaleY(0.5)
     }
</style>     

또는 다음과 같이 표현할 수 있다.

<style>
  h1{
     transform:scale(0.5,2)
     }
</style>    

scale 외에도 여러가지 transform이 있다.

Transition 전환

<style>
        a{
            font-size: 3rem;
            display: inline-block;
        }
        a:active{
            transform: translate(20px, 20px);
        }
    </style>

링크를 클릭했을때 클릭 버튼이 이동하게 할 수 있음. 하지만 자연스럽지 않기때문에
이것을 자연스럽게 하기 위해 전환(trnasition)을 사용할 수 있다.

 <style>
        a{
            font-size: 3rem;
            display: inline-block;
            transition-property: all;
            transition-duration: 1s;
        }
        a:active{
            transform: translate(20px, 20px);
        }
    </style>

transition-property

효과를 적용하고자하는 프로퍼티를 지정하는것으로 위와같이 all로 지정하면 모든 효과에 대해 장면전환이 적용되는 것. 즉 장면전환 효과를 누구에게 줄것인가.

transition-duration

시간을 조정함으로써 어떤 속도로 전환이 일어날지 정할 수 있다.

transition-timing-function

사용하면 변화의 자연스러움을 정할 수 있다.
linear : 갑자기 시작해서 갑자기 끝 (부자연스러움)
ease: 천천히 시작해서 천천히 끝 (자연스러움)
cubic-bezier: ceaser 사이트를 통해 원하는 timing-function을 정할 수 있음