5

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

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

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

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

我也使用了CamelCase 转换器，但它显示的结果与输入的结果相同。

提前致谢

4

2 回答 2

5

我不确定具体的 GWT，但在 JavaScript 中，您在使用前缀时会删除连字符。webkit 和 ms 是小写的，但 O 和 Moz 是大写的。下面是一些通过 vanilla 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)")
于 2013-05-15T06:08:10.943 回答
2

这是 GWT 如何检查驼峰大小写的代码：

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

因此，实现目标的可能方法是设置样式，而不是样式属性：

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

您也可以先获取样式，将其设为字符串，然后添加此属性并将样式分配回元素。

于 2013-05-15T11:49:08.377 回答