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>

预期过渡：只要一次旋转，一个方块向右移动。

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

但是，在将：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/

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

1 个答案: