bind-transforms demo touch or mouse over

The square is positioned using translateY and translateX CSS3 transforms bound to a human-model.

As you touch or mouse over, the only thing we do is set the model's x and y values:

model.set({x: pageX, y: pageY});

We use derived properties on the model to describe various styles we'd like bound to the element.

This makes it possible to describe highly-performant and intricate UI behaviors with very little code.