원점을 중심으로 회전 - Famo.us

Question

ImageSurface를 원점을 중심으로 회전시킬 수 있습니까?

원점을 중심으로 회전하지 않습니다. 누군가 날 회전 "의 중심으로"정렬 포인트를 사용하는 설명 할 수 있습니까? 이 회전 distante 지점이 같은

편집

내 ImageSurface가 회전하며 최대 확장 할 수 있습니다.

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

} 

내가 요소를 회전 비슷한 문제가 있었다

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

이것은 직설적 인 Famo.us를 사용하여 수행 할 수 있습니다. CSS를 수정할 필요가 없습니다. 여기에 예제가 있습니다. 이러한 수정 자 중 일부는 결합 될 수 있지만 명확성을 위해 분리합니다. 원점의 중심 맞춤은 먼저 곡면에 적용됩니다. 회전은 새롭게 정의 된 원점을 중심으로 회전합니다. 그런 다음 회전 된 표면이 번역됩니다.

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) 

Answer 2

MY SOLUTION. 변환 원점은 중앙 (50 % 50 %)으로 설정해야합니다. 나는 이것을 위해 CSS 클래스를 사용했다.

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