html - 沿一个轴平移元素，同时保持另一个轴不变

Question

我有一个应用了 transform: translateX(some_percent) 的 HTML 元素。

有没有办法在不改变沿 x 轴的平移的情况下沿 y 轴为该元素设置动画？

//编辑

澄清一下，some_percent 是未知的，无法访问它。

如果不更改 html，这在一般情况下是否可行，我很感兴趣。在我看来，好像翻译总是带有 translateY 的 (x,y) 向量。只是 translate(0,y) 的简写。

Answer 1

您可以使用包装元素并为其设置动画:

HTML

<div id="outter">
  <div id="img">

  </div>
</div>

CSS

#img {
  width: 250px;
  height: 150px;
  background-image: url('http://placehold.it/250x150');
  transform: translateX(22%);
}

#outter {
  transform: translateY(40%);
}

JS

var transY = 10;
var times = 0;
var x = function() {
  if (times > 5) {
    times = 0;
  }

    document.getElementById("outter").style.transform = 'translateY(' + times * transY + '%)';
  times++;
  setTimeout(x, 1000);
};

x();

https://jsfiddle.net/nayk1uLz/2/