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（） transform：translate（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>

使用CSS平移图像效果

1 个答案: