css - 为什么不同的 CSS3 旋转 + 平移 vs 旋转 + 左

Question

我有以下代码:CSS:

.wrapper {
    margin:80px  auto;
    width:300px;
    border:none;
}
.square {
    width:300px;
    height:300px;
    background-color:red;   
    transform-origin:0% 0%;
    position:relative;
    left:0px;

}
.square:hover{
    transform:rotate(45deg) translateX(200px);  
    transition: transform 5s ease-in-out 0s;
}

和 HTML:

<div class="wrapper">
<div class="square"></div>
</div>

预期的转变:一个方 block 向右移动，只要它一次全部旋转。

实际结果:方形平移旋转时的某种圆形路径。

然而，我在将 :hover 伪类更改为时实现了预期的转换:

transform:rotate(90deg);
    left:400px;
    transition: left 5s,transform 5s;

所以不是翻译，而是通过left属性进行移动

我的问题是:为什么我不能通过 left 属性获得与使用 TranslateX 相同的结果？

Answer 1

我在 Chrome (Ubuntu) 上试过这个，将 translate 放在 rotate 之前删除了循环行为:http://jsfiddle.net/4tMzz/1/