Способ создания скошенного масштабированного отражения в HTML

Question

Мне нужно проанализировать документ XML и создать элемент HTML для каждого элемента экземпляра, который я нахожу.

Мне нужно создать img, где его отражение И ТОЛЬКО его отражениене изображение имеет перекос и масштабируется.Это означает, что я просто не могу пойти:

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

Можете ли вы предложить способ / метод, который был бы наиболее эффективным и простым способом создания масштабированного и искаженного отражения элемента img?

Какой из них будет лучше (хотя, если у вас есть лучшие идеи, я бы хотел их услышать:)):
- Создайте еще одно HTML-изображение под фактическим изображением, а затем измените его стиль, чтобы сделать еговверх ногами, масштабирован и перекошен.
- Используйте серверный язык (C #) для создания отражения в виде .png
- Используйте методы / способы CSS3, о которых я не знаю?
- Используйте HTML5 canvas для созданияи изображение, и масштабированное наклонное отражение?Это веб-приложение исключительно для iPad, поэтому не имеет значения совместимость браузера с HTML5.

Это пример файла XML, который я анализирую:

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

Answer 1

JQuery:

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

CSS:

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

Я проверил это, и оно работает в симуляторе iOS с iPad.

Демо