Jquery Safari和Chrome中的css转换

我正在做一个过渡，结合了宽度过渡和旋转过渡。

问题是，在Safari和Chrome中，过渡非常不稳定

如您所见，在转换过程中会出现一个滚动条，我想这与此有关。当我将父对象设置为overflow:hidden时，滚动条不可见，但抖动仍然存在：

当过渡仅在旋转上时，不存在抖动： 请参阅“index3.html”（抱歉，目前还不允许发布3个链接）

---

我使用的是jquery.transit lib，但抖动也使用常规css方式出现。

为了防止在不使用溢出的情况下出现滚动条，您可以设置：

#right{
  min-height: 750px;
}

---

我看你的宽度是原来的两倍。。我的解决方案是在比例上设置动画：

起始位置：

 $(.draggable).css({'-webkit-transform': 'rotate(0deg) scale(1) translate(0,0)'});

$(.draggable).css({'-webkit-transform': 'rotate(-90deg) scale(2) translate(0,-200px)'});

结束位置：

 $(.draggable).css({'-webkit-transform': 'rotate(0deg) scale(1) translate(0,0)'});

$(.draggable).css({'-webkit-transform': 'rotate(-90deg) scale(2) translate(0,-200px)'});

这里有一个

---

如果成功，请告诉我：）

您是否尝试在“img”本身而不是父div的父div上进行转换？是否希望div#rondleiding保持相同大小？如果是这样的话，你可以给它一个固定的宽度，改变它的相对位置，然后将img frame划分为绝对位置。我的最后一件事是这样的，图形的每个部分都是一个独立的img，因此img本身不能旋转。#rondleiding的尺寸保持不变，尽管它应该是响应性的，所以实际上不是。。。为什么会这样？你认为这与相对定位有关吗？我明白了，你是否尝试过用缩放（）而不是宽度来设置动画？还没有，今天晚些时候会尝试，谢谢。使用下面的不是问题，我只是省略了它，所以你可以看到一个滚动条出现。滚动条的出现并不是问题本身，我认为它与震动有关。谢谢。它是有效的，但是。。。当我加上“左”时，它又在颤抖。。。也许试着用translate代替left。。看看答案更新，这无法看到JSFIDLE，因为服务器已经关闭，但我尝试了翻译，效果很好！非常感谢。你知道为什么这是有效的，而另一个是无效的吗？