Knockout style binding "-moz-transform" "webkit-transform" not working in FF

[Vincent Eberle]

When trying to bind the transform styles in Knockout,

<img data-bind="attr: { src: src }, style: {
width: scaledWidthCss(),
top: topCss(),
left: leftCss(),
'-webkit-transform': imageRotateCss(),
'-o-transform': imageRotateCss(),
'transform': imageRotateCss(),
'-moz-transform': imageRotateCss() }"/>

where imageRotateCss() definitely evaluates to the string
'rotate(45deg)'. This is working in Chrome but the binding doesn't
work in Firefox even though rotating works when I manually apply a '-
moz-transform' in Firebug.

If anyone could help, I'd appreciate it.

Thanks

[Brendan McLoughlin]

Vincent Eberle,

Knockout uses the element's style object to assign css properties. The browser vendors tend to use camel case when naming variables on this object instead of the '-' in the original css name. It looks like Chrome is nice enough to have both webkitTransform and '-webkit-transform' properties available on its style object. For Firefox you will need to use the 'MozTransform' property. 

http://jsfiddle.net/W8EhA/3/