悬停变换的闪烁效果

Question

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

我旋转使用文本容器：

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

而且悬停我正在旋转的包装做：

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

悬停工作正常，但问题是，当我们移动鼠标而不移动到外部包装的变换使得闪烁效果，就像我们离开元素和transf ormation被取消

任何建议将不胜感激。

问候

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