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.