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

如果你想在鼠标输出上有相同的效果，那么你应该把所有延迟，计时功能等放在实际的课程上，而不是悬停。

＆＃13;

.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);
 
}

＆＃13;

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

＆＃13;

Answer 2

通过将transition应用于任何伪类（例如:hover），只有在元素处于关联状态时才会应用该转换。

要实现您的目标，您需要将transition应用于.rot课程：

.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转换：matrix3d（） - 转换后，图像弹回原位而不是缓和？

2 个答案: