我有 4 张图像相互连接，形成一个大图像。我的任务是将大图像旋转到用户输入的某个角度。 现在，要旋转整个图像，我需要旋转较小的连接图像，然后相应地平移它们，这样整个图像就好像被旋转了。
但无法正确获取平移坐标。请帮我解决这个问题。 另外，如果有其他方法可以做到这一点，你也可以告诉我。
代码可以在这里找到 - https://jsfiddle.net/e4qp6btx/1/
document.getElementById("img1").style.transform = "translate(" + x + "px," + y + "px) rotate(" + angle + "deg)" ;
编辑 - 我实际上想旋转和平移单个图像，而不是旋转整个容器。
【问题讨论】：
标签： javascript image-rotation image-translation
我只是定位并旋转容器。然而，在 Mac Firefox 上尝试时，较小的图像似乎在它们之间留出了很小的空间。
rotateImage() {
var angle = document.getElementById('angle').value || 0; //angle to be rotated by
angle = angle % 360 + 'deg';
document.querySelector('.container').style.transform = `rotate(${angle})`;
}
我也会使用CSS variable 来设置角度，然后更新变量，而不是使用内联样式来更改transform: rotate 的值。
最后，我会给容器一个唯一的id。
【讨论】：
第二个解决方案。
默认情况下，旋转从图像的中心开始。您可以通过设置transform-orgin 来更改此设置。下面的 CSS 将使图像按应有的方式旋转，因此您无需翻译它们。您可能应该将我的两个答案放在一起弗兰肯斯坦，因为您几乎不需要任何代码来让您的 rotateImage() 工作。
#img1 {
transform-origin: bottom right;
}
#img2 {
transform-origin: bottom left;
}
#img4 {
transform-origin: top right;
}
#img3 {
transform-origin: top left;
}
请注意：您混淆了#img4 和#img3 的位置，其中#img4 在#img3 之前，因此这些图像的变换原点互换了。
额外的好处：
我觉得在四个不同的元素上设置相同的值有点浪费，所以我建议在 .container 上使用 CSS 变量来存储所有图像的旋转值。如果你这样做，在 Inspector 中测试不同的值会更容易。
CSS
.container {
--image-rotation: 0deg;
width:500px;
height:500px;
padding: 50px;
}
img {
width:100%;
height:100%;
transform: rotate(var(--image-rotation));
}
Javascript
rotateImage() {
const imgContainer = document.querySelector('.container');
let angle = document.getElementById('angle').value || 0; //angle to be rotated by
angle = angle % 360 + 'deg';
imgContainer.style.setProperty('--image-rotation', angle);
}
【讨论】：