CSS Reflection: Can I make it scale & Skew?

Question

Is to possible to have a HTML element with a CSS reflection but also define the reflection's skew & scale?

Note I am only coding for iPad so I'm only using CSS3 -webkit-box-reflection. Maybe there are -webkit-box-reflection attributes I can define to do this? Such as:

style="-webkit-box-reflection: below 0px skew(5) scale(0.5);"

PS: Are there ways to get reflections in Firefox, Chrome(webkit should work here shouldn't it?) & IE? As far as I know there you can only use CSS "tricks" to get reflections to work in firefox, is that true? Isn't there a -moz-box-reflection?

Answer 1

Yes you can do that but not in -webkit-box-reflection, you should do it with the element too:

-webkit-transform: skew(5) scale(0.5);

-webkit-transform:  /* Saf3.1+, Chrome */
   -moz-transform:  /* FF3.5+  */
    -ms-transform:  /* IE9  */
     -o-transform:  /* Opera 10.5  */
        transform:  /* Standard */
           filter: progid:DXImageTransform.Microsoft.Matrix(/* attr */) /* IE6–IE9 */
             zoom: 1; /* for filter (IE) */

but I don't know any cross-browser solution for box-reflect except canvas