Rotating around origin - Famo.us

Question

How can I rotate ImageSurface around it's origin if I have applied translate to it ?

It does not rotate around origin. Can someone explain me is it using "align point" as center of rotation ?

EDIT

My ImageSurface is rotating like it has distante point of rotation and it scales up.

 function _createFb() {

    this.fbLogo = new ImageSurface({
        size : [true, true],
        content : 'images/fb.png',
        properties: {
            zIndex: 10
        }
    });

      var fbModifier = new StateModifier({
        origin: [0.5,0.5],
        align:[0.5,0.5],
        transform: Transform.scale(0.4,0.4,1)

    });

       var fbPosModifier = new StateModifier({

        transform: Transform.translate(-250,520,0)

    });


    this.fbLogo.on("mouseleave", function(){

          fbModifier.setTransform(Transform.rotateZ(Math.PI/4), { duration: 1000});
    });

    this.layout.content.add(fbModifier).add(fbPosModifier).add(this.fbLogo);

}

MY SOLUTION

function _createFb() {

        this.fbLogo = new ImageSurface({
            size : [true, true],
            content : 'images/fb.png',
            properties: {
                zIndex: 10
            }
        });

          var fbModifier = new StateModifier({
            origin: [0.5,0.5],
            align:[0.5,0.5],
            transform: Transform.scale(0.4,0.4,1)

        });

           var fbPosModifier = new StateModifier({

            transform: Transform.translate(-250,520,0)

        });

           var fbRotateModifier = new Modifier();

           var transitionable = new Transitionable(0);


        this.fbLogo.on("mouseleave", function(){


              transitionable.reset(0);
              fbRotateModifier.transformFrom(function(){
                 return Transform.rotateZ(transitionable.get());
              }
                );

             transitionable.set(2 * Math.PI, {curve: "inOutQuad", duration: 500});
        });

        this.layout.content.add(fbModifier).add(fbPosModifier).add(fbRotateModifier).add(this.fbLogo);

    }

Answer 1

This can be done using straight Famo.us, no need to modify CSS. Here's an example. Some of these modifiers can be combined, but I'm breaking them up for clarity. Centering the origin is first applied to a Surface. Rotations now pivot about the newly defined origin. Then the rotated Surface is translated.

var surface = new Surface({
    size : [100,100],
    properties : {background : 'red'}
});

var translateModifier = new Modifier({
    transform : Transform.translate(100,0,0)
});

//rotates around and around based on your current system time
var rotateModifier = new Modifier({
    transform : function(){ return Transform.rotateZ(Date.now() * .001) }
});

var centerModifier = new Modifier({
    origin : [.5,.5]
});

context
    .add(translateModifier)
    .add(rotateModifier)
    .add(centerModifier)
    .add(surface)