I wanted to be able to do something like model.xPos = 2 and have it properly applied to a view without also squashing the translateY that I may already have set. Since, in CSS each of those (scale and translate) are both set as transforms on the same line, that was challenging. It also requires properly prefixing and then building and setting the full style string an element. By having a model that holds those values in simple formats that I can control (usually just a number). We don't have to worry about re-building that string each time, we can simply make the minimal adjustment to the model's values and the rest of the transforms will still be maintained.

You can optionally pass a specific model as the first argument. If you don't then this.model is used.

The bindingObject is a simple object containing the model properties (as keys) and the corresponding transforms as values. Each key in the object will be included in the built CSS transform string each time, thereby maintaining previous transform values even for properties that were not changed.

The last argument is for disabling automatically applying translateZ(0) at the end of the CSS string. We do this by default because it invokes the GPU (you can read more on this here: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/). The assumption being that if you're using transforms you're probably doing so looking for better performance.

Your binding object can include bindings to opacity. Opacity is one of the known properties that is known to be computationally inexpensive to animate, it's not a CSS transform property, but this lib handles that as well, allowing you to bind opacity as well, without any extra code.

You can also bind a few other non-transform properties for convenience. Specifically: