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解决方案，适用于所有主要的brosers和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 */
}

如何从右向左过渡图像

1 个答案: