CSS3转换复杂的旋转意外行为

时间:2013-07-18 03:36:26

标签: css3 css-transforms

在透视中观察div并进行转换rotateY(-90deg) rotateX(-180deg),前置rotateZ(-90deg)不会给出-90度的旋转,而是提供+270度的旋转。

div的风格来自于 transform: rotateY(-90deg) rotateX(-180deg);

transform: rotateZ(-90deg) rotateY(-90deg) rotateX(-180deg);

我不确定这种行为是否与以下事实相关:当您以时尚rotate(90deg) rotate(90deg) rotate(90deg)链接三个旋转时,结果不是+270度但是-90度的旋转。

请在此处查看jsFiddle http://jsfiddle.net/Sdg2W/1/

这是一个错误吗?任何见解将不胜感激。

2 个答案:

答案 0 :(得分:1)

据我所知,旋转正常。 当你说一个顺时针旋转,另一个逆时针旋转时,你是对的。但是你错过了这样一个事实:当旋转到+270时,它会旋转3/4圈。你的小提琴只转了1/4圈。

看到另一个小提琴:[http://jsfiddle.net/vals/Sdg2W/2/]。我只改变了转换的方式,这样你就可以更轻松地玩它了。

我认为令你感到困惑的是,由于Y轴有180度,因此旋转被反转(如果那是唯一的变换,则会反转)

答案 1 :(得分:0)

这确实是Mac上Chrome上发生的错误。