添加过渡时，css3 3D旋转会稍微移到其变换原点之外吗？

Question

我制作了一个css3多维数据集，并且试图将多维数据集的一侧打开，就像打开门或窗户一样。 因此，我使用了transformY和sat变换原点，同时加上了2s过渡。 最终达到我期望的程度。 但是在过渡期间，在向右移动之前，向左稍微转了一圈。 我想阻止那个。

这是我的代码尽可能简化

<div class="parent">
  <div></div>
</div>

CSS

.parent {
  perspective: 1000px;
}

.parent div {
  background: #ff6b6b;
  width: 300px;
  height: 300px;
  margin: 30px;
}

.parent div:hover {
  transform: rotateY(180deg);
  transform-origin: right center;
  transition: all 2s;
}

我需要这个div在水平路径中旋转，右侧是变换的原点，而不是更改位置。 但它确实在左侧。 我该如何解决？ 很抱歉，如果不是很清楚。

Answer 1

您已将transform-origin设置为悬停状态。

但不是处于基本状态。

这意味着在过渡过程中，您不仅要旋转，而且还要更改旋转点。

它应该是

.parent div {
  background: #ff6b6b;
  width: 300px;
  height: 300px;
  margin: 0px;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

.parent div:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transition: all 2s;
}

小提琴