css 变换原点被旋转覆盖答案

【问题标题】：css transform origin gets overwritten with rotatecss 变换原点被旋转覆盖
【发布时间】：2018-01-10 04:35:07
【问题描述】：

我正在研究 CSS 转换，但我无法让这一部分工作。

#photo-container img {
  transition: transform 2s, transform-origin 2s;
}

#container-1 img:hover {
  transform: rotate(45deg);
  transform-origin: 0 0;
}

#container-2 img:hover {
  transform: rotate(1.5turn);
  transform-origin: 50%, 50%;
}
#container-3 img:hover {
  transform: scale(1.5);
  transform-origin: 0 0;
}

<div class="photo-container" id="container-1">
  <div class="photo">
    <img src="http://placehold.it/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

三个类 HTML 元素与下面发布的相同。我的问题是，假设我将变换原点更改为 0 0，并且它有一个要旋转的变换集，当旋转发生并完成时，它不是以与到达那里相同的方式返回到其原始位置，而是自行重新定位，然后转到旋转函数中指定的那个点并从那里开始。

我在这里错过了什么还是这是正常功能？

编辑。我塞了点东西。不好意思打扰了

【问题讨论】：

这还不清楚。你是什么意思，“而不是像到达那里一样回到原来的位置”？ transform-origin 是旋转的中心，默认相当于transform-origin: 50% 50%。通过将其设置为0 0，它会围绕左上角的一个点旋转。
我的意思是，如果我将它的原点设置为 0 0，也就是左上角，它会去那里，但是当它回到原点时，它会通过设置原点到 50% 50% 然后旋转回来，所以枢轴已经移动了。
您使用的是哪个浏览器？它在 Mac 上的 Chrome、Safari 和 Firefox 中以 0 0 旋转。

标签： css transform

【解决方案1】：

尝试将transform-origin 添加到没有hover 的图像中。并将#photo-container 更改为.photo-container 我看不出还有什么问题。

.photo-container {
  display: inline-block;
}

.photo-container img {
  transition: transform 2s, transform-origin 2s;
  transform-origin: 0 0;
}

#container-1 img:hover {
  transform: rotate(45deg);
}

#container-2 img:hover {
  transform: rotate(1.5turn);
}

#container-3 img:hover {
  transform: scale(1.5);
}

<div class="photo-container" id="container-1">
  <div class="photo">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

<div class="photo-container" id="container-2">
  <div class="photo">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

<div class="photo-container" id="container-3">
  <div class="photo">
    <img src="http://via.placeholder.com/100x100" alt="">
    <div class="grey"></div>
    <a href="#" class="button">epicface</a>
  </div>
</div>

【讨论】：

如何回答这个问题？
那你能给我解释一下吗？ :) 你改变了 CSS，从而改变了他的代码的行为，所以问题是什么.. 因为我不明白他的意思
@TemaniAfif 问题是关于图像没有返回到初始位置。我稍微更改了代码，并在几个浏览器中检查了它。效果很好。
好吧，还是没明白。在他的代码中，图像也回到了它的初始位置，在你的也是，只是用不同的方式......无论如何，他的问题还不清楚