Re: CSS3 Transforms

Skip to first unread message
Message has been deleted

Joseph Lust

Jun 30, 2012, 3:19:48 PM6/30/12

Use MozTransform, not mozTransform

You can confirm this by doing 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);

Reply all
Reply to author
0 new messages