raphael - RaphaelJSの要素の3D回転

Question

次のアニメーションがraphael.jsで許可されているかどうかを判断するのに役立つことを願っています。要素をページから飛ばそうとしています。アイデアは、要素が3Dで落下/飛散するように見えるようにすることです。要素にX度回転してスライドさせるように指示することはできますが、要素の外観が背景に依存しないためです。私がやりたいのは、ラファエルに、壁から落ちた絵のように見えなくなったような錯覚を与えて、上隅が落ちるときに上隅を「外側」に回転させるように指示できるようにすることです。これは可能ですか、それともラファエルは2次元空間でのみ動作しますか？

Answer 1

Raphael は 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);   
};

これは、あなたが遊ぶためのフィドルの例です。欠点は、これが真の 3D 回転のように遠近感を伝えないことです。