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);

    }

score 3 · Accepted Answer · answered Jun 21 '14 at 21:37

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)

user3700765 · Answer 2 · 2014-06-17T21:48:10.483

1

I had similar problems to spin an element. The transform origin needs to be set center (50% 50%). I used css class for this.

.myClass {
    -webkit-transform-origin: 50% 50% !important;
}

var myElem = new Surface({
    size: [40, 40],
    classes: ['myClass']
});

this.myElemModifier = new StateModifier();

// called from user action
this.myElemModifier.setTransform(
    Transform.rotateZ(Math.PI), { duration: 5000 }  
);

edited Jun 17 '14 at 21:48

answered Jun 17 '14 at 20:47

user3700765

41
4

But origin 0.5,0.5 should set origin. – Sysrq147 Jun 17 '14 at 20:57
1

I think so too, but it didn't work. Check the element with web inspector and see if the transform origin is set correctly. I had to use css class with { -webkit-transform-origin: 50% 50% !important; } – user3700765 Jun 17 '14 at 21:26
Solution that I posted worked for me, I need confirmation why ? :) I will try your solution also. – Sysrq147 Jun 17 '14 at 21:28

Rotating around origin - Famo.us

2 Answers2