css - Flicker effect on hover transform -


i'm trying make cube 2 sides, 1 image container , other text container. here working plunker

i'm rotating text container using:

.page__text {   transform: rotatey(-90deg) translatez(75px); } 

and on hover i'm rotating wrapper doing:

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

the hover works fine, problem when move mouse without moving outside wrapper transform makes flicker effect, if leaving element , transformation canceled

any suggestion appreciated.

regards

when wrapper rotated, no longer has area on can hover (it @ 90 deg view)

change hover state parent, still

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

plunker


Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -