CSS3 非线性动画路径

如何使用 css3 制作非线性动画？

基本上，如果我需要从视口中取出一个盒子，并且它是一条直线向下的路径，那么使用以下代码就很容易做到：

*{
    transition: transform 0.5s ease-in;
}

-- And some JS to trigger the animation with a transform: translate3d(0,300px,0);

但是当元素旋转时会发生什么？说25度？然后，为了让动画看起来有些自然，它需要以 25 度的偏移线进行，而不能只是自上而下或左右动画......

我希望我在这里说得有道理...看看这里的演示http://jsfiddle.net/YMHT4/8/ http://jsfiddle.net/YMHT4/8/

我正在尝试让蓝色盒子在倾斜的路径上产生动画......

我不确定我的理解是否正确，但如果你想做我的想法，那么答案很简单：

function ani()
{
    if (!state)
    {
        $('#otherbox').css('-webkit-transform', 'translate3d(100px,150px,0) rotate(25deg)');
        state=true;
    }
    else
    {
        $('#otherbox').css('-webkit-transform', 'translate3d(0,0,0) rotate(25deg)');
        state=false;
    }
}

如果你改变translate3d(x,y,z)中的x和y，那么两个维度都会有动画，并且你会得到一个对角路径动画。

http://jsfiddle.net/YMHT4/17 http://jsfiddle.net/YMHT4/17