0

我有 4 个相互连接的图像，形成一个大图像。我的任务是将大图像旋转到用户输入的某个角度。现在，要旋转整个图像，我需要旋转较小的连接图像，然后相应地平移它们，这样整个图像就好像被旋转了。

但无法正确获取平移坐标。请帮我解决这个问题。另外，如果有其他方法可以做到这一点，你也可以告诉我。

代码可以在这里找到 - https://jsfiddle.net/e4qp6btx/1/

document.getElementById("img1").style.transform = "translate(" + x + "px," + y + "px) rotate(" + angle + "deg)" ;

编辑 - 我实际上想旋转和翻译单个图像，而不是旋转整个容器。

4

2 回答 2

0

我只是瞄准并旋转容器。然而，在 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 变量来设置角度，然后更新变量，而不是使用内联样式来更改transform: rotate值。

最后，我会给容器一个独特的id.

于 2021-08-09T06:46:52.233 回答
0

第二种解决方案。

默认情况下，旋转源自图像的中心。你可以通过设置来改变它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 之前，因此这些图像的变换原点被调换了。

额外的好处：

我觉得在四个不同的元素上设置相同的值有点浪费，所以我建议使用 CSS 变量 on.container来存储所有图像的旋转值。如果你这样做，在 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);
  }

https://jsfiddle.net/mg46dz7h/

于 2021-08-09T17:48:49.580 回答