How can we apply CSS3 style to a image in GWT 2.5

Question

I want to apply a CSS3 transform style to an image in GWT. For Example

imageZoom.getElement().getStyle().setProperty("-webkit-transform", "translate3d("+x+"px, "+y+"px, 0px)");

Where x and y are the coordinates of the mouse cursor in the image. It shows the error as
Casused By java.lang.AssertionError: The style name should be in camel case format.
I renamed the style property to the following

1.-webkit-Transform
2.-Webkit-transform
3.-Webkit-Transform

I have also used the CamelCase Convertor but it is showing the same results as the one entered.

Thanks in Advance

Answer 1

I’m not sure about specifically GWT, but in JavaScript you remove the hyphens when using a prefix. webkit and ms are lower case, but O and Moz are uppercase. Here is some code for setting a transform in WebKit via vanilla JavaScript:

var el = document.getElementById("test");

el.style.webkitTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

And here are the other prefixes and prefixless. Note the prefixless starts with lowercase:

el.style.MozTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.msTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.OTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.transform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

Here is a demo of it in action: http://jsfiddle.net/qScux/

EDIT:

In GWT, that'd be:

imageZoom.getElement().getStyle().setProperty("webkitTransform", "translate3d("+x+"px, "+y+"px, 0px)")

Answer 2

Here's the code how GWT checks camel case:

private void assertCamelCase(String name) {
    assert !name.contains("-") : "The style name '" + name
    + "' should be in camelCase format";
}

So the possible way you can achieve your goal is to set style, not property of style:

imageZoom.getElement().setAttribute("style", "-webkit-transform: translate3d("+x+"px, "+y+"px, 0px)");

Also you can get the style first, make it toString, then add this property and assign style back to element.