Re: CSS3 Transforms

[Joseph Lust]

Solved:

Use MozTransform, not mozTransform

You can confirm this by doing yourElement.style. in Firebug to see the list of all available CSS style property names. 

Because GWT just passed through to this (code shown below), you need to match the names exactly. 

• WebKit - does not matter if upper/lower
• Mozilla - needs uppercase
• IE9 - needs lowercase
• Opera - uppercase
• khtml - lowercase

It looks like you may need to empirically determine this capitalization for each browser. :(

  /**
   * Sets the value of a named property.
   */
  private native void setPropertyImpl(String name, String value) /*-{
    this[name] = value;
  }-*/;

Also, just a tip, but it would be easier if you built the property value string once, and then iterated across the list of property names. Though it is not the case here, you run the risk of a typo in one of the six setProperty() calls corrupting the CSS, which would be easy to miss when reading over the code. Try something like the following:

    /**
     * Apply all vendor prefixed styles for translation of given element
     * @param el element to translate
     * @param x distance to translate
     */
    public static void translateX(Element el, int x) {

        String value = "translate(" + x + "px)";
        String name = "Transform";

        String[] engines = new String[]{"","webkit","ms","Moz","O","khtml"};        
        for( String prefix : engines ) {
            el.getStyle().setProperty( prefix+name, value);
        }
    }

Sincerely,

Joseph