우선 애니메이션 구현시 자주 사용하는 transform 속성에 나타나는 문제를 해결하고자 합니다. 대부분의 최신 브라우저는 정상적이나 Safari(사파리)와 익스플로러 예전 버전(8.0 이하)에서 나타나는 문제를 해결하기 위한 방법입니다. 그럼 해당하는 문제가 어떤 브라우저이냐에 따라 아래 내용을 참고해주세요.# 사파리(Safari) 브라우저에서 발생할 경우웹킷엔진인 사파리에서 3d효과를 구현하기 위해 CSS3의 translate 속성을 사용할 경우 유독 Safari에서만 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 수 많은 구글링이 필요했고 결국 방법은 찾...
CSS를 사용하여 다양한 시각적 효과, 애니메이션을 구현할 수 있는 transform 속성에 대하여 알아보려합니다.# CSS transform 알아보기먼저 transform은 css3 속성으로 선택한 엘리먼트의 크기 및 위치, 회전 등등 다양한 시각적인 조작을 가능하게 해줍니다. 또한 css의 transition 속성과 함께 사용할 경우 다양한 애니메이션 및 인터렉션 구현 역시 가능해집니다. 그럼 간단하게 CSS3의 transform 문법과 실제 적용되는 모습의 코드를 보시죠.transform: scale(2)@ 간단한 t...