html - 使用 CSS 对图像进行平移效果

Question

我想使用 CSS 对图像产生平移效果。我有一个缩放效果，但这不是我想要的。我希望图像具有相同的高度，但其中有平移效果。

.col_2 {
  width: 46%;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 50px;
  float: left;
  display: block;
}

.box {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eeeeee;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.box:hover {
  box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.25);
}

.box .image {
  overflow: hidden;
}

.box .image img {
  width: 100%;
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.image:hover img {
  overflow: hidden;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="col_2 box">
  <a href="#" class="image">
    <img src="http://ll-c.ooyala.com/e1/RoMXVvYjE6bIIVlTLF6Eel1wmw9xj9j_/promo322520974"></a>
</div>

Answer 1

只是改变:

transform: scale(1.1);

到: //注意，你可以传递 x, y 来翻译或者你可以直接使用 //translateX() 或 translateY() 转换:翻译(someAmount)；

获得平移效果。但是，为了能够在特定方向(动态)平移量进行平移，您需要获取鼠标在元素上的位置并根据该位置做出一些决定。

此外，过渡和转换在所有现代浏览器中都得到了很好的支持，并且已经支持了好几年。您可以删除所有供应商前缀。

.col_2 {
  width: 46%;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 50px;
  float: left;
  display: block;
}

.box {
  transition: all 0.3s ease-out;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eeeeee;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.box:hover {
  box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.25);
}

.box .image {
  overflow: hidden;
}

.box .image img {
  width: 100%;
  max-width: 100%;
  transition: all 0.3s;
}

.image:hover img {
  overflow: hidden;
  transform: translateY(-25%); /* translate is for move (pan), not scale */
}

<div class="col_2 box">
  <a href="#" class="image">
    <img src="http://ll-c.ooyala.com/e1/RoMXVvYjE6bIIVlTLF6Eel1wmw9xj9j_/promo322520974"></a>
</div>