对悬停变换的闪烁效果

Question

我试图制作一个有两个边的立方体，一个带有图像容器，另一个带有文本容器。 Here是工作人员

我使用以下方式旋转文本容器：

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

在悬停时，我正在旋转Wrapper：

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

悬停工作正常，但问题是，当我们移动鼠标而不移动外部包装时，转换会产生闪烁效果，就像我们要离开一样元素和转换被取消<​​/ p>

任何建议都将受到赞赏。

此致

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