Question

我正在尝试使用CSS3和javascript旋转/动画环境。所以我有一个带有面的立方体对象，它位于一个“旋转器”对象内，该对象是在UI中与之交互的对象。我想这样做，以便当你单击一个面时，它会将它附加到旋转器div之外的div，但是将变换矩阵应用于其父对象的对象，以便它在外部出现相同的方向。 “旋转器”就像在里面一样，但是可以动画并且变得独立于“旋转器”div中的其他物体。

以下是应执行此操作的click事件的函数：

这取决于几个自定义函数，请参阅完整代码的小提琴和函数参考。

jQuery('#top').on('click',function(){
    if(jQuery(this).parent().is('#cube')){  // only do this if it isn't already detached
        M = jQuery(this).getTransMatrix(); // get the local transform of this
        M = M.multiply(jQuery('#rotator').getTransMatrix()); // multiply it by the rotator's transform to get the final transform
        jQuery(this).appendTo('#container'); // move this to the container div outside of the rotator
        jQuery(this).css(CSS3.prefix+'transition','none'); // make sure that style changes, etc happen instantly
        // wtf here
        console.log(M.cssTransformString()); // just to check, we see the transform string before it is assigned. It's what it should be in my tests
        jQuery(this).css(CSS3.prefix+'transform',M.cssTransformString()); // we apply the string. The wrong transformation results. If I double-check it from the console, it is NOT the string from the previous line          
    }
});

如果你看完小提琴，你就可以拖动来旋转立方体。点击脸部会有一些效果。与明星的顶面是有问题的。单击时，根本不应用转换。即使我登录控制它即将应用的变换字符串，下一个操作也不会导致应用该字符串。它根本不坚持。但是，如果我点击并稍微拖动，然后光标仍然在脸上释放，然后变换粘住。我试过跟踪几乎所有的东西，我无法弄清楚为什么变换只是在你正常点击时才会坚持（没有按住/移动）

小提琴：

http://jsfiddle.net/spaceboycoop/PWkB9/

css3使用jQuery应用的matrix3d值

0 个答案: