http://codepen.io/waynespiegel/pen/jEGGbj
I stumbled upon this fantastic feature that I would love to incorporate into my website (purely for personal practice) and am intrigued by how it can be integrated. As a newbie in this type of programming, I'm currently using GitPages and have a website up and running.
To start, I created a file named "sphere.css" with the following 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); }
}
Then, I created another file titled "sphere.html" with the code below:
<!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>
Unfortunately, the implementation is not successful and I'm uncertain where to place the code from a source like this to make it functional. Once again, this exercise is purely for educational purposes.
Appreciate any guidance in advance!