How to to use this 3D animation?

[JosiahB]

I am designing a Christmas card and need some help … http://christmascard.netau.net/ …

I would like to use the same animation that is used in this example of the circle … http://css3playground.com/flip-card.php

Any help on how to achieving this would be greatly appreciated!

[David_Leitch]

Hey @JosiahB I’ve done a [CodePen](http://codepen.io/David_Leitch/pen/jgikB “http://codepen.io/David_Leitch/pen/jgikB”) that will help you get started. Basically, all I’ve done is taken the original HTML/CSS/Javascript from the example and stripped out everything that wasn’t essential to show you how it’s done.

If you need some more help with it, let me know and I’ll see if I can help :)

[David_Leitch]

Sorry to double post, but I thought you might also be interested in this:

So, on the page that you linked, there was an example of a box that flipped on hover. It said that could be achieved in CSS, without any Javascript, but didn’t actually show you how. That left me curious.

I coded it up in CodePen, and thought you or other might be interested in it; [here](http://codepen.io/David_Leitch/pen/saFem “http://codepen.io/David_Leitch/pen/saFem”) it is.

[JosiahB]

Thanks soo much for your help so far!! alright so I have half of it flipping but for some reason I can’t get the rest …. http://christmascard.netau.net/

[David_Leitch]

Heyo, happy to help. Have had a bit more of a play with it on my [CodePen](http://codepen.io/David_Leitch/pen/HLlep “http://codepen.io/David_Leitch/pen/HLlep”) and a couple of things came to mind:

You’ve declared z-index on a couple of other elements, so maybe have a look at the layering of your elements. I’ve declared z-index of 0 on the container element ‘card’, which might resolve that.

I think it also might have to do with not explicitly declaring the height and width. Unfortunately, I think you might have to give them some values, rather than just having them be auto, as I’ve don in my CodePen.

Finally, I don’t think this will have any impact, but you’ve linked your stylesheets etc in the header tag within the body tag. You should probably link these in the head tag which is outside/above of the body tag.

Hope it all helps, but in any case have a merry Christmas :)

[JosiahB]

THANK YOU SOOOOO MUCH!!!!!!!!!! I really appreciate it! :D You have a very Merry Christmas too!! :)

[Author]

Posts