[EDIT] Famo.us version > 0.2.0 introduced the "align" property.
var rotation = new StateModifier({
origin:[0.5,0.5], // Set the origin to the center, this will center the rotation as well
align:[0,0], // Set the surface's origin to the upper left corner of the parent
transform: Transform.rotateZ(1), // a transform (here a rotation)
});
Here below is my previous solution for versions < 0.2.0:
As long as there is no modifier with the "size" property the context one is taken as a fallback. In the same way, a modifier cannot be positioned relatively to its parent if its size property is missing. Here is an example on how to do this
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [100, 100],
properties: {
backgroundColor: '#FA5C4F' // a silly square surface
}
});
var rotation = new StateModifier({
origin:[0.5,0.5], //center for the rotation
transform: Transform.rotateZ(1),// a transform
});
var stateModifier = new StateModifier({
origin:[0.0,0.0],//The modifier position according to the parent
size:[100,100],// The size with which the modifier can be positioned (note that using [1,1] would put the center of the square stuck to the upper left corner)
});
mainContext.add(stateModifier).add(rotation).add(surface);