懸停變換的閃爍效果

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