悬停变换的闪烁效果答案

【问题标题】：Flicker effect on hover transform悬停变换的闪烁效果
【发布时间】：2015-04-22 19:40:48
【问题描述】：

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

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

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

在悬停时我正在旋转 Wrapper：

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

悬停效果很好，但问题是当我们移动鼠标时不移到外面包装器会产生闪烁效果，就像我们要离开一样元素和变换被取消了

任何建议将不胜感激。

问候

【问题讨论】：

标签： css hover transform

【解决方案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

【讨论】：

谢谢@vals 我没注意到，现在可以正常工作了
很高兴它有帮助:-)