CSS transform: matrix3d() - 转换后，图像弹回原位而不是缓动？

Question

我正在尝试对图像实施 3D 矩阵变换。当我将鼠标悬停在图像上时，转换工作正常。但是，我似乎无法让它顺利过渡回原来的位置。当我在悬停后离开图像时，它会迅速弹回原位，而不是平滑过渡。

（此外，我试图最终反映这种转变 - 使图像向右而不是向左弯曲......有什么想法吗？）

尝试了很多不同的解决方案 - 任何帮助都会很棒！

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
}

.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
  transition-delay: 0s;
  transition-duration: 2s;
  transition-timing-function: ease;
}

Answer 1

如果你想在鼠标移开时有同样的效果，那么你应该把所有延迟、计时功能等放在实际的 class 上，而不是悬停时。

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
   transition-delay: 0s;
  transition-duration: 2s;
  transition-timing-function: ease;
}

.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
 
}

<div class="rot"></div>

Answer 2

通过将 transition 应用于任何伪 class，例如 :hover，仅当元素处于关联状态时才应用该转换。

因此，要实现您想要的效果，您需要将 transition 应用于 .rot class:

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
  transition:transform 2s ease;
}
.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
}

<div class="rot"></div>

至于你问题的第二部分，我不是 100% 确定你试图达到的确切效果（你能编辑你的问题以包括一个例子吗？）但只是添加一个 transform-origin 可能会帮到你：

.rot {
  width: 100px;
  height: 100px;
  background-color: black;
  transition: transform 2s ease;
  transform-origin: 0 0;
}
.rot:hover {
  transform: matrix3d(0.9659258262890683, 0, 0.25881904510252074, 0, 0, 1, 0, 0, -0.25881904510252074, 0, 0.9659258262890683, 0, 0, 0, 0, 1);
}

<div class="rot"></div>

CSS transform: matrix3d() - 转换后，图像弹回原位而不是缓动？

CSS transform: matrix3d() - After transition, image pops back into place instead of easing?

css

animation

transition

css-transitions