Animation CSS3非线性动画路径

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

基本上，如果我需要从视图端口引入一个框，并且它是一条直线路径，那么使用以下代码就足够简单了：

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

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

但是当元素旋转时会发生什么呢？25度？然后，为了使动画看起来更自然，它需要以25度的偏移线前进，不能只是自顶向下或左右动画

我希望我在这里讲得有道理。。。看看这里的演示

---

我正试图让蓝色框在倾斜的路径上进行动画制作…

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

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，则两个维度都将设置动画，并且您将获得对角线路径动画

---

如果您在他的示例中尝试了它，您会注意到，如果您执行它，那么旋转也会设置回0。看：（我用chrome来测试）我更新了它，所以它也从旋转开始：啊啊啊，终于明白了OP的意思了！真的，哈哈。。。出于某种原因，我没有想到要在多个轴上平移元素以实现对角线过渡。。。古怪的我指望有什么东西是内置的，如果一个元素是旋转的，它的本机轴也会移动，以匹配它的相对北。。。好吧，非常感谢你们的帮助。。。合作FTW。。。