A flip on hover project with css

Hey guys! My card is suppose to be centered and it is also supposed to rotate a little. But it is doing neither. Please tell me why. Thank you!

As for centering, I use flexbox for pretty much everything.

#centeredElementsParent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

There is an incredible guide here. Centering/aligning using anything else is nonsense. Using flexbox, you can still use margins to customize the alignment to your needs. It’s like a perfect solution.

1 Like

I normally use flexbox myself. I forgot to try. Thank you, I’ll see if it works right now.

Darn, it didn’t work

Probably because your card has position: absolute. Make sure to put the flex stuff on the parent (I think body in your case). But yeah, absolute is your problem with regards to flexbox not working I would imagine. Position: absolute takes the element completely out of the document flow and just positions it where your left,right, etc tell it to.

1 Like

That is much better now.

1 Like

Nice job dude good luck

1 Like

Actually, this won’t work too well. I think I still need help with both problems. :grimacing:

Also, since my card isn’t working, I can’t find out how to make my image work either. Please help!

Try this:https://www.w3schools.com/howto/howto_css_flip_card.asp

1 Like
  1. The transform function name is perspective not persepective.

  2. origin-left is not a valid value for the transform property. You might be thinking of transform-origin but its values are just separated by a space (e.g. transform-origin: center right).

  3. Try using a front and back face for the image (Card Flip).

1 Like

It looks good now! Thank you @lasjorg and @GalaxyCoding!

your welcome @codeofdreams . I am always happy to help!

1 Like