Css 应用于两个相等div之一的rotate（）无法完全对齐背景图像

我有两个div

  <div class="nextButton" onclick="showSlides()"></div>
  <div class="prevButton" onclick="showSlides()"></div>

我原以为它们会完美地排列在一起，然而，我能注意到一些像素的轻微位移

见下图

---

我正在寻找如何让它们完美对齐的建议？

使用缩放变换而不是旋转来实现完美对齐

.nextButton{
右：2米；
}
.prevButton{
右：4em；
变换：比例（-1,1）；
}
.prevButton，
.下一个按钮{
排名：0；
高度：2米；
宽度：2米；
位置：绝对位置；
字号：18px；
背景：url数据：数据：图像/svg+xml；Bas64，PD94BBBWWBWWBBWWBBBBBBBWWWWWWWWWBZZZZZZvvvvvvvv数据：数据：数据：数据：数据：图像/图像/svg+svg+xml；数据；数据；数据：图像：图像/数据：图像/数据：图像/数据：图像/数据：图像/数据：图像/图像/图像/数据/数据/数据；数据：数据：图像/图像/数据/SVSVSVSV（数据/数据/数据/数据；数据；数据：图像/数据：SVSVSVG；数据；数据；数据：图像/数据；数据：图像/数据：图像/数据；SVSVSVSVSVSVSVG；数据；数据；数据；数据：图像/数据：图像/数据；SVSVSVSVSVSVG；svg；数据；数据；数据；数据；数据：图像/数据；数据；数据；数据；数据；数据；数据；SVSVJXKZXNJLZ48ZGVMC8+PGCGZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ昆斯2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 NTQSMTK2LJG0MZE0NIBAIbmaWxPSIjmDawIbZD0Iy2ly2XLW5LehqTyxJYB3CzGlzy2xVC3VYZS1NBHLWACIGDHJHbNmb3JTPSJ0CmBuc2xHdGuGuWmJuWmJuWmDawMc2NbGuHbGuWf0IbGuWcJuWmKlWgLdWgLbWgLbWmI41MdApivivivZ48L2c+PC9zdmc+）；
背景尺寸：封面；
}

---

最可能的解释是，图像的圆形部分没有居中，但略低于中心。然后，在旋转版本中，它略高于中心

将此添加到css中，然后仔细测量以查看：

 div {border: 1px solid black;}

要解决此问题，您可以更改图像的编码。
但这可能会很困难，所以不那么优雅的方式会很困难 通过更改css来偏移一个或另一个

例如，将“padding top:2px；”添加到过高的位置。
或者，将其中一个或两个的最大值更改为90%以外的值。

---

或者，将它们水平分开一点，这样就不那么明显了。

虽然您的答案可以是解决方案，但理论上，由于视口的大小不同，这不是最好的解决方案。公认的答案提供了一个完美的解决方案。

 div {border: 1px solid black;}