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

3D hover effect - CSS only


  1. Neat. Excellent job!

  2. Very nice thinking!

  3. I know the placeholder says "be cool", and I know the spirit of Codepen is to be creative, but how are 103 lines of HTML and 1061 lines of CSS better than potentially a couple lines of HTML, several line of CSS, and roughly 10-15 lines of JS? I think this is cool regardless.

  4. @mofny I didn't say it was better :) You can also use a 3x3 grid that reduce the size of the HTML & CSS ;)

  5. @mofny it will work on js blocked browsers. ;) And my experience is css animations has less laggs time to time than js animations. But thats relative to the coder, the system and the browser.

  6. Nice pen! If you use <a> instead of <div>, it'll work on mobile as well! Since <a> elements have events tied to them already

  7. very smart !! i like it very much, however, i cannot find the image xD

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

You must be logged in to comment.