CODEWITHSUNDEEP
csshovertransform
Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

Flicker effect on hover transform

I'm trying to make a cube with 2 sides, one with an image container and the other with a text container. Here is the working plunker

I'm rotating the text container using:

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

And on hover i'm rotating the Wrapper doing:

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

The hover works fine, but the problem is that when we move the mouse without moving outside the wrapper the transform makes a flicker effect, just like if we were leaving the element and the transformation were canceled

Any suggestion will be appreciated.

Regards

Upvotes: 2

Views: 130

Answers (1)

vals
vals

Reputation: 64244

when the wrapper is rotated, it no longer has a good area on which you can do the hover (it is at 90 deg to your view)

change the hover state to the parent, that is 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

Upvotes: 3

Related Questions