css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A 3d Flip Clock using CSS transforms and transitions and a little JS to get things going.


  1. Very nice, i literally sat here watching for a good while. Keep up the nice coding :)

  2. Thanks man, When I get the time I'll re-factor this into a plugin of some sort for making airport style flip-boards or something.

  3. pm? html am.

  4. @asgator not sure what you mean? Are the pm and am not showing correctly on 12? Whipped this up pretty quick, not sure I checked.

  5. Love it, Gerwin! I'm using it on http://ninasword.wpengine.com/

    One bug - IE9 doesn't like the meridiem on the flip of the digit, and it appears to inherit the font properties of the number i.e. huge :) To fix it I had to target it with .digit-bottom .front > div. See my fork of your pen here: http://codepen.io/JoelEadeDesign/pen/rlips


  6. @JoelEadeDesign Mate, that looks awesome! I'm so glad you found such a good use for it. Great job! Thanks for the fix also :) Cheers.

  7. Cheers mate :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.