Come applicare lo stile CSS3 a un'immagine in GWT 2.5

Question

Desidero applicare uno stile di trasformazione CSS3 a un'immagine in GWT. Per esempio

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

Dove xey sono le coordinate del cursore del mouse nell'immagine. Viene visualizzato l'errore come
Casused By java.lang.AssertionError: il nome dello stile deve essere nel formato caso cammello.
ho rinominato la proprietà di stile al seguente

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

ho anche usato il CamelCase Convertor ma sta mostrando gli stessi risultati di quello inserito.

Grazie in anticipo

Answer 1

non sono sicuro riguardo specificamente GWT, ma in JavaScript si rimuovono i trattini quando si usa un prefisso. webkit e ms sono in minuscolo, ma O e Moz sono maiuscoli. Ecco il codice per impostare una trasformazione in WebKit via vaniglia JavaScript:

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

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

Ed ecco le altre prefissi e prefixless. Nota la prefixless inizia con le minuscole:

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)'; 

Ecco una demo di esso in azione: http://jsfiddle.net/qScux/

EDIT:

In GWT, che sarebbe:

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

Answer 2

Ecco il codice su come GWT controlla il caso di cammello:

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

Quindi il modo possibile, si può raggiungere il tuo obiettivo è quello di impostare lo stile, non di proprietà di stile:

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

Inoltre è possibile ottenere lo stile prima, lo rendono toString, quindi aggiungere questa proprietà e assegnare stile torna all'elemento.