悬停变换的闪烁效果

Question

我正在尝试制作一个有 2 个边的立方体，一个带有图像容器，另一个带有文本容器。 Here 是工作 plunker

我正在使用以下方法旋转文本容器：

.page__text {
  transform: rotateY(-90deg) translateZ(75px);
}

悬停时我正在旋转 Wrapper：

.wrapper:hover {
  transform: rotateY(90deg) translate3d(0, 0, 0);
}

悬停效果很好，但问题是当我们移动鼠标时 没有移动到外部 变换的包装器会产生 闪烁效果 , 就像我们离开元素并且取消转换一样

如有任何建议，我们将不胜感激。

此致

Answer 1

当包装器旋转时，它不再有一个可以悬停的好区域（它与您的视图成 90 度角）

将悬停状态更改为父级，即仍然

.cube-page__item:hover .cube-page__item-wrapper {
    -webkit-transform: rotateY(90deg) translate3d(0, 0, 0);
            transform: rotateY(90deg) translate3d(0, 0, 0);
}

plunker

悬停变换的闪烁效果

Flicker effect on hover transform

css

hover

transform