CSS3非线性动画路径

2011-07-14 31 views 4 likes

基本上，如果我需要从出视口的带盒，其直降路径，那么它很容易用下面的代码做：

*{ 
    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/

我试图让蓝色方块动画在一个倾斜的路径上...

来源

2011-07-14 Abhishek

回答

我不知道如果我理解正确的，但如果你试图做我在想什么，那么答案很简单：

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

来源

2011-07-14 14:57:01 Duopixel

，如果你试图在他的例子中，你发现如果你执行它，然后旋转也被重新设置为0。见：http://jsfiddle.net/YMHT4/15/（我用的镀铬以测试它） – SynerCoder

啊，谢谢，编辑我的答案占这一点。 – Duopixel

我更新了它，所以它也开始于轮换：http://jsfiddle.net/YMHT4/17/ – SynerCoder

CSS3非线性动画路径

回答

相关问题