javascript - 在使用变换原点时尝试在 div 中居中图像

Question

我有一个图像查看站点，希望能够在缩放时更近距离地查看图像的一部分。我正在使用变换原点来执行此操作，并且效果很好。问题是图像偏离了页面的中心，这是一个大问题，因为我希望它居中。我能够在缩放后使用 img.style.left 让它工作，但这使用高 cpu，我宁愿在一个语句中包含所有内容。试图弄清楚 translateX 的值应该是什么。这是我的 jsfiddle 显示它在使用 style.left 时工作正常。

https://jsfiddle.net/7bfc1s9w/

要对其进行测试，您可以简单地将 transformOriginValues 设置为：

let transformOriginValues = {'x': 1, 'y' : 10};

请不要原始值以百分比为单位。使用滑块增加图像大小

挑战在于工作完全相同，但在缩放/旋转操作期间使用平移。

谢谢

标签： javascriptcss

Answer 1

在 csstransform中，您可以与和translate一起使用。您可以尝试这样做，而不是使用属性。scalerotatetransform-origin