css - 我们如何将 CSS3 样式应用于 GWT 2.5 中的图像

Question

我想将 CSS3 转换样式应用到 GWT 中的图像。例如

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

其中 x 和 y 是鼠标光标在图像中的坐标。它将错误显示为
由 java.lang.AssertionError 引起:样式名称应采用驼峰格式。
我将样式属性重命名为以下

1.-webkit-转换
2.-Webkit-转换
3.-Webkit-转换

我也用过 CamelCase Convertor但它显示的结果与输入的结果相同。

提前致谢

Answer 1

我不确定具体的 GWT，但在 JavaScript 中使用前缀时会删除连字符。 webkit 和 ms 是小写，而 O 和 Moz 是大写。下面是一些通过普通 JavaScript 在 WebKit 中设置转换的代码:

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

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

这里是其他前缀和无前缀。注意无前缀以小写开头:

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

这是它的实际演示:http://jsfiddle.net/qScux/

编辑:

在 GWT 中，这将是:

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