Implementing "pure Css Sphere" Into Website - How Do I Do It?

http://codepen.io/waynespiegel/pen/jEGGbj I found this awesome thing that I would like to be a part of my website (just for personal use and practise) and am curious to how this wo

Solution 1:

You're looking at preprocessed CSS and HTML - namely SCSS and HAML. In Codepen, if you click the eye icon for each of the code areas, you can toggle between viewing the preprocessor code, and the actual generated output.

The reason many devs/designers choose to use preprocessors is it greatly accelerates coding and makes many things much easier. For your Codepen example - there are 100 <div class="o"></div> being generated, and 100 animation transformation/colour base values. This is massively impractical, and shouldn't be used in production.

If you wanted a rotating sphere like this on your website - you might find better results using a spritesheet, an animated .gif, or writing it in WebGL.