如何从右到左转换图像[关闭]

Question

我在一行上有 3 张图片，当将鼠标悬停在上面时，它们会移动到中心并变大。前两个图像完美地移动到中心并展开，但第三个图像闪烁并且没有完全进入屏幕中心。我认为这可能是因为所有图像都从左向右移动，但第三张图像需要从右向左移动。我不知道该怎么做......

这是我目前的代码：

        <img class="computers" src="images/shauna.png">
        <img class="computers" src="images/bbb.png" >
        <img class="computers" src="images/cotp.png" >  
        <img class="computers" src="images/chocolate.png" >

和css：

 .computers {
    height:300px;
    width:300px;
    margin:2% 0 0 5%;
    float:left;
    overflow: auto;
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s
 }

.computers:hover {
   width: 570px;
   height: 500px;
   padding: 100px;
}

关于我的意思的一个活生生的例子，看看这里的图片及其运动：example.cadencemag.com

Answer 1

好的，如果我正确理解了您的要求，我改进了我原来的答案 - 这是纯 CSS3 解决方案，适用于所有主要的兄弟和 IE9+。在 codepen 演示中查看这个 - http://codepen.io/anon/pen/YXgLvp

请注意，图像尺寸是缩略图大小的两倍，因此在应用 CSS3 缩放因子 x2 时，它仍然非常清晰。您还可以设置位置，从哪里扩展过渡。

.computers {
    height:200px;
    width:200px;
    margin: 50px 0px 0 100px;
    float:left;
    overflow: hidden;
    -ms-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
 }

.computers:hover {
  -ms-transform: scale(2,2); /* IE 9 */
  -webkit-transform: scale(2,2); /* Chrome, Safari, Opera */
  transform: scale(2,2); /* all other browsers */
  -ms-transform-origin: 50% 0%; /* IE 9 */
  -webkit-transform-origin: 50% 0%; /* Chrome, Safari, Opera */
  transform-origin: 50% 0%; /* all other browsers */
}