使用 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（） 转换：翻译（一些金额）;

以获得平移效果。但是，为了能够在某个方向（动态）平移量，您需要获取鼠标在元素上的位置并据此做出一些决定。

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

.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>