Transform into a business card

[matt_sanford]

Hey guys! I am currently working on my personal site and would like to have a nifty little animation that acted as a digital business card so to speak.
Here is my pen http://codepen.io/anon/pen/emCLG. What I would like to do is have the element rotate 180 degrees to a “text side” that has some elements on it. I realize that I should probably have this in a <div> instead of a <img>. I am just looking to see what would be the best way to do this. z-index? show() or hide() with query? Eventually I would like to make this into one mixin with Sass but this is all that I got for right now.

backface-visibility would make the other side white but I don’t think that would help. Thoughts?

Thanks!

[bearhead]

Hi Matt I came up with this:
An Anonymous Pen http://codepen.io/anon/pen/fLEdu

It might be a different effect than what you were going for, but it looked like you wanted the circle to appear as if it was flipping over to the “back” side? So that’s the effect I tried to create…

Also I’m using content: "" in the css to write the text which you may or may not be ok with… you could probably finagle something with <figure><figcaption> but just using content seemed more straight forward if maybe not semantic.

[Author]

Posts