Coverflow 中浏览器之间的 CSS3 过渡差异，如幻灯片

Question

参见:http://jsfiddle.net/nweBD/

我正在尝试使用 CSS3 转换创建类似幻灯片的 Coverflow，但我从不同的浏览器中得到不同的结果:

FF;显示想要的行为(右滑动动画从右到中心)。 Chrome ;第一个位置右侧在左侧滑动，然后动画到中心。IE10;什么都不做

HTML:

<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>

CSS:

div{
  position:absolute;
  width: 300px;
  height:100px;
  background-color: yellow;
  margin-left: -150px;
  left: 50%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.middle{
  text-align:center;
  z-index:2;
  height:120px;
}

.left{
  text-align:left;
  left: 0;
  right: auto;
  margin-left: 0;
  background-color:green;
}

.right{
  cursor:pointer;
  text-align:right;
  right: 0;
  left: auto;
  margin-left:0;
  background-color:red;
}

Answer 1

这里的问题确实是浏览器没有或充其量是“自动”动画的各种结果。

为了解决这个问题，我重写了 CSS 以不使用 left:auto;右:0； 但 左:100%；左边距:-300px。这意味着我只需为 left 和 margin-left 属性设置动画，我不需要将它们重置为默认的 auto。负边距与元素的宽度相同，将其拉回所需位置，得到与 right:0; 相同的结果。

这是一个更新的 fiddle :http://jsfiddle.net/nweBD/3/