3D Revolving Planet With Pure CSS3

codepen.io

21 points·michaelkscott··12 comments

This isn't 3D. This is just a flat texture being scaled and moved behind a circular mask. Try setting border-radius to 0. This is interesting, but not novel (people have done far more with just CSS, and I'm betting you could use CSS 3D transforms and transitions to generate actual animated polygons).

If you are a first-year beginner, good work. Keep it up. If not, well, you might have some studying to do.

Cool! If you copy/paste everything that has a -webkit prefix, and replace it with -moz, it will also work in Firefox (with a little stutter).

It does not rotate. It just scrolls the texture without any deformation.

May i know the browser are you opening it in?

Google Chrome 21.0.1180.89 m but also no spehrical deformation in Firefox and no sign in the code of anything that could cause it.

I can confirm it being the case in both Opera (12.01 1532) and Chrome (21.0.1180.81). It's very notable if you remove translation and rescaling.

And from the code, it's what it's supposed to do. It's a convincing effect unless you pay attention to the details.

3D revolving planet without any CSS, but with RSS: http://www.taodyne.com.nyud.net/shop/en/blog/42-showing-rss-....

3D Revolving RMS With Pure CSS3:

http://codepen.io/anon/full/aIjLw

this is nice...go go open source!

Although it's the site and not the example, I found it somewhat ironic that I had to whitelist javascript to view something in pure CSS.

Finally someone says "Pure CSS" and actually means it!

This works well (with a slight stutter) in Firefox 15.

I have fixed the prefixing issue. And will now work correctly everywhere :)

Reply on news.ycombinator.com