How to to use this 3D animation?
# December 21, 2012 at 7:36 pm
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!# December 21, 2012 at 9:07 pm
If you need some more help with it, let me know and I’ll see if I can help :)# December 23, 2012 at 7:42 am
Sorry to double post, but I thought you might also be interested in this:
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.# December 24, 2012 at 11:47 pm
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 :)
You must be logged in to reply to this topic.