建议把调用改成onmousemove 更直观一点
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onmousemove="rotate()" /><br/>
<input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" onmousemove="rotate()" /><br/>
2015-12-08
其实timing-function还有几个模式: step-start | step-end | steps(6, end)
最后一个蛮有意思的,把动画分几段执行,可以用这个制作一个纯css3的秒表
-webkit-transition:width 2s steps(6, end),有兴趣的试一下这个模式
秒表思路:在一个div里竖向排列1-9,每隔1秒位置往上走一步(top值),
使用 -webkit-animation: moveten 1s steps(10, end) infinite;
最后一个蛮有意思的,把动画分几段执行,可以用这个制作一个纯css3的秒表
-webkit-transition:width 2s steps(6, end),有兴趣的试一下这个模式
秒表思路:在一个div里竖向排列1-9,每隔1秒位置往上走一步(top值),
使用 -webkit-animation: moveten 1s steps(10, end) infinite;
2015-11-11
-webkit-transform-style:preserve-3d;如果按之前的例子写成 -webkit-transform-style: -webkit-preserve-3d;效果不一样会显示一部分最后一张内容。
2015-11-02