RaphaelJS에서 요소의 3D 회전

Question

다음 애니메이션이 raphael.js에서 허용되는지 여부를 결정하는 데 도움이되기를 바랍니다. 나는 요소가 페이지에서 벗어나려고 노력하고있다. 생각은 그것이 떨어지는 것처럼 보이거나 3D로 날아가 버리는 것처럼 보인다. 요소를 X 각도로 회전하고 슬라이드하지 않도록 말할 수 있지만 요소의 모양이 hte 배경과 독립적입니다. 제가하고 싶은 것은 라파엘에게 벽 밖으로 떨어지는 그림처럼 보이지 않는 환상을주는 것처럼 떨어지면서 꼭지점을 "밖으로"회전 시키라고 말할 수 있습니다. 이것이 가능합니까 아니면 Raphael은 2 차원 공간에서만 작동합니까?

Answer 1

라파엘은 2D 공간만을 취급합니다. 3D 플립을 구현하려면 위조해야합니다. 고맙게도 Raphael은 Scale (sx, sy, x, y)을 변형 op로 구현하므로 원점을 기준으로 3D 'flip'회전을 가짜로 만들 수 있습니다. 예를 들어

: 당신이 연주하는

Raphael.el.flipXTransform = function (parentBbox) { 
    var x = this.getBBox().x; 
    var width = this.getBBox().width; 
    parentBbox = parentBbox || { width:width, x: x}; 
    var parentWidth = parentBbox.width; 
    var parentX = parentBbox.x; 
    var originX = parentX - x + parentWidth/2; 
    return 's-1,1,' + originX + ',0';  
}; 

Raphael.el.flipX = function (duration, easing, parentBbox) { 
    duration = duration || 500; 
    easing = easing || 'easeInOut'; 
    var scale = this.flipXTransform(parentBbox); 
    this.animate({ transform: '...' + scale }, duration, easing); 
}; 

는 여기 fiddle example을합니다. 단점은 이것이 진정한 3D 회전과 같은 관점을 전달하지 않는다는 것입니다.