HTML에서 비대칭 스케일 리플렉션을 만드는 방법

Question

XML 문서를 구문 분석해야합니다. & 찾을 수있는 모든 인스턴스 요소에 대해 HTML 요소를 만듭니다.

나는 그것의 반사 만 그것의 반사가없는 이미지의 크기가 조절 된 스큐 &이있는 IMG을 작성해야합니다.

img.style.WebkitTransform = "scale(0.26) skew(-1deg)"; // this will make the image scale & skew also 

당신은 IMG 요소의 확장 & 왜곡 된 반사를 만들 수있는 가장 효율적인 & 것이 가장 간편 할 수있는 방법/기술을 제안 할 수 있습니다 :이 난 그냥 갈 수 없음을 의미? (당신은 더 나은 아이디어가 있다면 나는 :)을 듣고 싶네요 있지만)

이 중 가장 좋은 것입니다 :
- 다음 거꾸로 그것을 확인하기 위해 스타일을 조정 실제 이미지 아래에 또 다른 HTML의 IMG 만들기, &은 비뚤어졌습니다.
- 서버 측 언어 (C#)를 사용하여 리플렉션을 .png로 생성하십시오.
- CSS3 기술을 사용하는 방법에 대해 알고 있습니까?
- HTML5 캔버스를 사용하여 이미지 &과 비대칭 반사를 모두 생성 하시겠습니까? 이것은 iPad 용 웹 응용 프로그램이므로 브라우저와 HTML5의 호환성에 대해서는 중요하지 않습니다.

<instance type="ImageBox" width="439" height="292" top="153" left="460" tReflectionEnabled="true" tReflectionScale="0.26" tReflectionAlpha="0.18" tReflectionSkew="-1"/> 

Answer 1

jQuery를 :

이

내가 구문 분석 XML 파일의 예입니다

$("img").each(function() { 
    $(this).wrap('<div class="imgWrap" />'); 
    $(this).after($(this).clone().addClass("imgCopy")); 
}); 

CSS :

.imgCopy { -webkit-transform:scale(.26) skew(-1deg);}

나는이 테스트가 작동 iPad와 iOS 시뮬레이터.

Demo