A flip on hover project with css

Code Feedback
1

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!

2

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
3

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

4

Darn, it didn’t work

5

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
6

That is much better now.

1 Like
7

Nice job dude good luck

1 Like
8

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

9

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

10

Try this:https://www.w3schools.com/howto/howto_css_flip_card.asp
or
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_5rrT5tTrAhXBGc0KHZ3wDnsQwqsBMAN6BAgKEAs&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DLc6wyl1KdOc&usg=AOvVaw1iwMd_ApiUpwYFSmdrBA63

1 Like
11

  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
12

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

13

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

1 Like