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

Live coded in just under 15 minutes and 50 lines of SCSS on the 11th of December 2015. Needs a browser supporting transform-style: preserve-3d to work. Inspired by:

world cube image

From Shutterstock.


  1. The style of stars is so cooool!!!! <3

  2. This is awesome. Maybe the earth is flat.

  3. Fast and Really AWESOME!!!

    You can get around the IE not supporting transform-style: preserve-3d by animating each face separately. MSDN Transforms docs (scroll down to transform-style): http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx

    "At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

    Here is a CSS 3D cube example that also works in IE, animating each face separately to workaround browsers like IE, that do not support preserve-3d: http://codepen.io/jonathan/pen/yeYyxa

    Great Job Ana .. much love :)

  4. @jonathan I had no idea. I never wrote an article about it. Oh, well...

    Guess I should have mentioned it in the description, I've started getting so superficial with them lately... :( Then again, I've written long ass really detailed descriptions that took me a long time and then I saw people people sharing the demos with labels that made clear they hadn't read anything...

  5. This is the best earth I've seen for a while. There is a little gap in between the faces and I can see the opposite sides, I would just add a backface-visibility: hidden; in the css div.

  6. @ge1doot The gap is precisely why I haven't done that. I'd see the background black plus stars in that case and it would bother me even more. :|

  7. @thebabydino ah... I see. How about outline: #000 solid 1px; then ? But it's just an insignificant tiny detail.

    p.s.: you don't want to see the Microsoft Edge version ;-))))

    edit: line 45, translateZ(.49*$l); removes the gaps.

  8. Seems like I survived the edge of world (one of) last time I went fom Copenhagen to Berlin ;) Love it <3

  9. @jakob-e I survived two of them twice going to Australia and returning! :o

    @ge1doot Hmm, maybe layer a grid on top like this?

    world cube with grid

    It would go past 50 lines of SCSS that way though... :( (yes, I have an obsession)

    The MS people might want to see it though, so...

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

You must be logged in to comment.