将 transform attr 的每个 X 值增加 50

Question

我正在尝试将每个图像的 transform translate X value 增加 50。我可以用宽度来做到这一点。无论如何我可以用 transform translate X value

做到这一点

预期结果：

transform="translate(64.5,0)
transform="translate(114.5,0)
transform="translate(164.5,0)

这是我增加每个宽度的代码：

HTML:

<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">

Javascript/jQuery:

$('.what-can-we-do-tash').css('width', function(i){
   return $(this).width() + (i * 50);
});

我可以为 transform translate 值做类似的事情吗？

Answer 1

应该这样做：

$('.what-can-we-do-tash').css('transform', function(i, s) {
   return s.replace(/(\d+)(\.\d+)?(, ?\d+\))/, (s, t, u, v) => `${parseFloat(t + u) + 50 * (i + 1)}${v}`)
});

.what-can-we-do-tash {
  transform: translate(100.5px ,0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">
<img src="http://lorempixel.com/400/200" class="what-can-we-do-tash">

将 transform attr 的每个 X 值增加 50

Increment each of X value of transform attr by 50

html

javascript

jquery

transform

translate