尝试在使用变换原点的同时将div中的图像居中

Question

我有一个图像查看站点，希望在缩放时能够更仔细地查看图像的一部分。我正在使用转换原点来做到这一点，并且效果很好。问题是图像偏离页面中心，这是一个很大的问题，因为我希望它居中。 缩放后，我能够使用img.style.left使它正常工作，但这使用了较高的cpu，我宁愿将所有内容都放在一个语句中。 试图弄清楚translateX的值是什么。这是我的jsfiddle显示使用style.left时可以正常工作。

https://jsfiddle.net/7bfc1s9w/

要对其进行测试，只需在以下位置设置transformOriginValues：

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

请不要将原始值以百分比表示。使用滑块增加图像尺寸

挑战是要完全一样地工作，但要在缩放/旋转操作期间使用平移。

谢谢

Answer 1

在CSS transform中，您可以将translate与scale和rotate一起使用。您可以尝试使用该属性，而不要使用transform-origin属性。