Grow your CSS skills. Land your dream job.

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

    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 :)

    # December 23, 2012 at 7:42 am

    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.

    # December 24, 2012 at 10:05 pm

    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/

    # 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 :)

    # December 24, 2012 at 11:48 pm

    That’s some cool stuff

    # December 25, 2012 at 12:48 am

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".