CODEWITHSUNDEEP
htmlcsscss-animations
Shan Robertson
Shan Robertson

Reputation: 2742

CSS animation using rotateY to flip half a circle

I'm trying to make an animation with CSS. Check out my fiddle: http://jsfiddle.net/xonuf2k1/1/

It is being flipped by this class:

.green .half.right.rotate{
  transform:rotateY(180deg);
}

You will notice, when you run the fiddle that half of the circle folds outward. What I am trying to achieve is to have that circle fold over the other direction, so the round edge of the right half, meets up with the round edge of the left half.

the animation is going to be a big sequence but I can't for the life of me figure out how to get this half circle to flip the opposite direction.

Thanks for your feedback!

Upvotes: 1

Views: 1672

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

add this transform-origin: top left to .green .half.right.rotate

.green .half.right.rotate {
   transform: rotateY(180deg);
   transform-origin: top left
}

Upvotes: 2

Related Questions