当鼠标悬停但不移动时，转换后的图像不会保持可见？答案

【问题标题】：Transformed image won't stay visible when the mouse is hovering but not moving?当鼠标悬停但不移动时，转换后的图像不会保持可见？
【发布时间】：2017-08-10 07:24:56
【问题描述】：

我有我的课程页面here，我在其中使用 CSS 对图片应用 3d 变换，以通过过渡放大它们。当我悬停时出现问题，它应该完成过渡，除非鼠标在悬停时移动，否则它会消失。

我已经尝试过这些方法来确保没有闪烁：

   transform: translateZ(0);
   -webkit-transform: translateZ(0);

和

   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

但没有什么可以解决的。

【问题讨论】：

我看过你的代码，你不需要设置transform3D和scale 3D，使用transform和scale即可。所以你的图片在悬停时不会隐藏

标签： html css transform

【解决方案1】：

您需要将您的 CSS 重新定义为：

div.regionarticle figure:hover, div.regionarticle figure:active {
  width: 30%;
  float: right;
  transform: translate3d(-180px, 80px, 0px) scale(2, 2);
}

您目前拥有 scale3d(2, 2, 0) 但 doesn't exist。

【讨论】：

【解决方案2】：

CSS :hover 只能在鼠标悬停在元素上时使用文字，这是它的工作原理。

如果你想从鼠标悬停开始放大到最后不管鼠标位置，你可以使用CSS动画。

【讨论】：