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 would be implemented. I'm fairly new to this kind of programming. I'm using GitPages and got a website running.

Decided to make a file called "sphere.css" with the code:

$size: 300px;
$total: 100;
$time: 5s;

* { box-sizing:border-box; }

html, body {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
display: box;
box-align: center;
box-pack: center;

.o-wrapper {
width: $size;
height: $size;

transform-style: preserve-3d;
animation: $time spin-that-shit linear infinite;

.o {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid;
  border-radius: 100%;

  @for $i from 1 through $total {
    &:nth-child(#{$i}) {
      transform: rotateY($i * 2deg) rotateX($i * 2deg);
      border-color: hsla($i * 10%, 100%, 50%, .2);
        }
      }
    }
  }
}

@keyframes spin-that-shit {
100% { transform: rotateX(360deg) rotateY(360deg); }
}

And the another file called "sphere.html" with the code:

<!DOCTYPE html>
    <html>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
      <body>
    <header>
    Random Title
    </header>

<div id="content-wrapper">
  <div class="inner clearfix">
    <section id="main-content">
        .o-wrapper 
        -100.times do 
        .o
    </section>
  </div>
</div>
  </body>
</html>

But it's obviously not working and I have no idea where to put the code from a site like this to make it work. Once again this is just for learning purposes.

Thanks in advance!

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.

Recommended topics

Hot tags