본문 바로가기

css3

개체 변형, 회전 시키기 (transform) css3의 transsform 속성을 설명하고자 합니다, transsform은 개체의 모양을 변형 혹은 회전등의 외곡을 줄 수 있는 속성으로 기존 javascript에 의존적이던 기능을 css3 transsform 속성만으로 구현할 수 있습니다. -webkit, -moz, -ms, -o 와 같은 접두사를 통해 브라우저 호환성을 확보할 수 있지만, IE9 미만의 브라우저에서는 호환되지 않으니 유념 하시길 바랍ㄴ다. IE8 이하의 브라우저 호환성을 배제한 프로젝트라면 javascript에 의존하지 않은 깔끔한 개발이 가능하겠네요. 1. 접두사 안내 위에서 언급 되었듯, 접두사를 통해 브라우저 호환성을 확보할 수 있는데, 접두사는 transform:속성; -webkit-transform:속성; -moz-tra..
css3 Animations 속성 (animation, keyframes) css3 애니메이션 특성 특성 설명 @keyframes 애니메이션 코드를 지정합니다 animation 모든 애니메이션 속성을 나열해서 표현 가능한 속성입니다. animation-delay 애니메이션 시작 전 딜레이 시간을 설정하는 속성입니다. animation-direction 애니메이션의 방향을 설정하는 속성입니다. animation-duration 애니메이션이 플레이되는 시간을 설정하는 속성입니다. animation-iteration-count 애니메이션을 재생해야 하는 횟수를 설정하는 속성입니다. animation-name 애니메이션 네임 속성입니다. animation-play-state 애니메이션 일시 중지를 설정하는 속성입니다. animation-timing-function 애니메이션의 속도 스..