cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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.