在css3中使用rotateY vs matrix3d

时间:2014-04-13 00:05:10

标签: css3 matrix transform

Heyho。我想出了一个棘手的问题。 我这样做了:http://jsfiddle.net/LspdF/1/

如你所见,有超过4个网站。这就是为什么我做了以下事情: 当pic-numer大于最后的pic-number时,我将立方体转向左边,否则就是严格的。这就是为什么它会发生,css有点像这样: transform: rotateY(450deg)

由于圆圈只有360度,因此转动并转动,但总是在正确的方向上。

现在我想添加一个很好的效果。这样的事情:http://jsfiddle.net/p8a2t/

对于这个效果,我需要浏览器创建的3d矩阵的第14个值(翻译的z值)。由于此值与translateZ()差不大,因此我必须使用matrix3d() - 属性。

这就是为什么我自己计算rotateY的原因。但正如您所知sincos是定期的,并且无法使用我的450deg。他们将立方体重置为90度,这使得立方体旋转速度非常快。

我的问题:如何否定?是否有可能改变旋转矩阵超过360度?

PS:使用过渡实现效果。由于我不得不一次创建两个示例,因此可能会在小提琴中使用代码。

PPS:有时计算会产生致命的数字错误(接近零但不是零)。我试图使用toFixed来避免这种情况,但由于某些原因,有时候它不起作用。与Math.round相同。请注意,您可以在动画仍未完成时单击许多链接的第二个示例。但这不是重点:)

感谢任何帮助!

0 个答案:

没有答案