2011-11-16 9 views
1

나는 제곱 된 이미지를 가지고 있습니다. 원근감보기를 추가 한 다음 이미지를 다시 정사각형보기로 복원 할 애니메이션을 만들어야합니다. 이 작업은 적어도 최신 버전의 브라우저와 플래시없이 작동해야합니다. 다음과 같이웹의 이미지에 원근법 추가

This is what I need to make

나는이 일을 시도 :

  1. 하는 난 단지 클립 이미지 (경로를 생성하고 이미지 URL로 입력 설정), 시각을 추가 할 수 없습니다 RaphaelJS 사용.
  2. 캔버스가 RaphaelJS에서 svg 및 vml로 작동합니다 ... 도움이되는 관점을 추가 할 수 없습니다.
  3. CSS3 3D 애니메이션 방식 rotateX는 원근감을 추가하지만 Chrome 및 Safary에서만 지원됩니다.
+0

아직이 문제에 대한 해결책을 찾았습니까? 나는 또한 운이없는 아직 같은 문제에 하나를 찾고있다. –

+0

@AndreiOniga, 나는 아래에 답했다. –

답변

0

내장 된 도구를 사용하여 이미지에 원근감을 추가 할 방법이 없습니다.

유일한 해결책은 내가 사용하고있는 것으로 나타났습니다 SVG 이미지에 clip path을 추가합니다. 투시도를 추가하지는 않지만 가능한 최상의 해결책입니다.

이해할 수 있듯이 캔버스을 사용하여 원근감을 추가 할 수 있지만 일반 이미지를 원근감있는보기로 변환하려면 자바 스크립트 알고리즘을 작성해야합니다.

+0

결론적으로, 이러한 작업을위한 내장 도구는 아직 보이지 않습니다. –