변형속성
![[HTML5&CSS3] 변형 속성](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FVw6OA%2Fbtqz0AUPFAO%2FAAAAAAAAAAAAAAAAAAAAAJr4c6vW3kKEIZvS1N2b4U1KMZB9GN5CQ13rP_Td70ee%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dj5YBdi1WEgDmrkp2R7pxMaYKfi8%253D)
[HTML5&CSS3] 변형 속성
CSS3에서는 변형 속성을 통해 간단한 애니메이션을 구현할 수 있습니다. 우선 변경 속성이 어떻게 사용되는지부터 간단하게 알아보겠습니다. Web Page Design Hello, World! 위 예제는 div에 간단한 스타일을 적용한 예제입니다. 이 상태에서 div에 마우스를 올리면 색상이 변하도록 스타일을 다음과 같이 추가합니다. 그럼 div에 마우스를 올릴 때마다 색상이 검은색으로 바뀔 것입니다. 이제 애니메이션 구현을 위해 transition-duration 속성을 추가하고 값을 3s로 주겠습니다. 이렇게 하면 div에 마우스를 올릴 때 색상이 바뀌는 건 똑같지만 3초 정도의 지연시간이 적용되어 색상이 서서히 바뀌는 걸 확인할 수 있습니다. 이와 같은 변경 속성은 다음과 같은 속성에 적용되며 위치관..