RaphaelJS中元素的3D旋转

Question

我希望你能帮助我确定下面的动画是否允许在raphael.js中。我试图让一个元素飞离页面，这个想法是让它看起来像是在3D中飞落。我能够告诉元素旋转X度并滑落，但是它缺少元素的外观而不依赖于背景。我想要做的是能够告诉拉斐尔将顶角“旋转”出来，当它掉落时，会让它看起来不像是从墙上掉下来的图像。这甚至可能吗？或者拉斐尔只能在二维空间中运作？

Answer 1

拉斐尔只处理二维空间。要实现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旋转那样的视角。