CODEWITHSUNDEEP
csscss-transforms
Prosto Trader
Prosto Trader

Reputation: 3527

Css flip animation - "fold" one div under another

I'm trying to get effect when one div is being "folded" under another one. I' cant make it rotate on the left side.

Sorry for the drawing: enter image description here

Here is my code:

  .flipper:hover  {    
    -webkit-transform: rotatey(180deg);
    backface-visibility: hidden;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

Here is the fiddle: Fiddle

Upvotes: 1

Views: 1204

Answers (1)

iMoses
iMoses

Reputation: 4348

What you want to do is change the transform origin of your element. Currently it would seem that the rotation is happening from the center of the element, meaning that your origin is 50% 50% on the x and y axis.

You can use transform-origin: 0 0; (or -webkit-transform-origin: 0 0; in your case) to override the original origin definition.

Notice: In my Example I added a parent element in order to attach the :hover to it. If the hover would have been on the .flipper element than once the element would move you will no long hover it.

Upvotes: 1

Related Questions