RaphaelJS中元素的3D旋转

Question

我希望你能帮我确定raphael.js中是否允许使用以下动画。我试图让一个元素飞离页面，这个想法是让它看起来像是在3D中掉落/飞走。我能够告诉元素旋转X度并滑落，但它缺乏元素的外观独立于背景。我想做的是能够告诉raphael将顶角旋转“向外”，因为当它从墙上掉下来时，它会让人产生幻觉。这甚至可能还是拉斐尔只在二维空间中运作？

Answer 1

拉斐尔只处理2D空间。要实现3D翻转，你必须伪造它。值得庆幸的是Raphael将Scale（sx，sy，x，y）作为变换操作，因此您可以缩放原点以伪造3D'翻转'旋转。

例如：

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旋转一样传达视角。