Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class='field'>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
  <div class='circle'>
    <div class='rotor'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
    </div>
  </div>
</div>
</body>
</html>
 
/* http://imgur.com/a/FywLp#48 */
​
/* 
 * uses nested 3D transformed elements => 
 * won't work in browsers not supporting
 * transform-style: preserve-3d;
 * see http://caniuse.com/#feat=transforms3d
 */
html {
  overflow: hidden;
  height: 100%;
  perspective: 50em;
  perspective-origin: 50% -30%;
  background: black;
}
.field, .field * {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
}
.field {
  animation: roty 40s linear infinite;
}
/*
 * take the radius of the torus to be rt = 8em
 * take n = 24 circles on the torus
 * and m = 24 dots on each circle
 * p = 3 colours used
 * ad = 15s animation duration
 */
​
.circle:nth-child(1) { /* i + 1 for i = 0*/
  transform: 
    rotateY(0deg) /* i*360/m for i = 0 */
    translateZ(8em); /* rt */
}
.circle:nth-child(1) .rotor {
  animation: rotx 15s /* ad */ linear 
    0s /* -(i%p)*ad/p for i = 0 */
    infinite;
}
.circle:nth-child(2) {
  transform: rotateY(15deg) translateZ(8em);
}
.circle:nth-child(2) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(3) {
  transform: rotateY(30deg) translateZ(8em);
}
.circle:nth-child(3) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(4) {
  transform: rotateY(45deg) translateZ(8em);
}
.circle:nth-child(4) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(5) {
  transform: rotateY(60deg) translateZ(8em);
}
.circle:nth-child(5) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(6) {
  transform: rotateY(75deg) translateZ(8em);
}
.circle:nth-child(6) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(7) {
  transform: rotateY(90deg) translateZ(8em);
}
.circle:nth-child(7) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(8) {
  transform: rotateY(105deg) translateZ(8em);
}
.circle:nth-child(8) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(9) {
  transform: rotateY(120deg) translateZ(8em);
}
.circle:nth-child(9) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(10) {
  transform: rotateY(135deg) translateZ(8em);
}
.circle:nth-child(10) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(11) {
  transform: rotateY(150deg) translateZ(8em);
}
.circle:nth-child(11) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(12) {
  transform: rotateY(165deg) translateZ(8em);
}
.circle:nth-child(12) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(13) {
  transform: rotateY(180deg) translateZ(8em);
}
.circle:nth-child(13) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(14) {
  transform: rotateY(195deg) translateZ(8em);
}
.circle:nth-child(14) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(15) {
  transform: rotateY(210deg) translateZ(8em);
}
.circle:nth-child(15) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(16) {
  transform: rotateY(225deg) translateZ(8em);
}
.circle:nth-child(16) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(17) {
  transform: rotateY(240deg) translateZ(8em);
}
.circle:nth-child(17) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(18) {
  transform: rotateY(255deg) translateZ(8em);
}
.circle:nth-child(18) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(19) {
  transform: rotateY(270deg) translateZ(8em);
}
.circle:nth-child(19) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(20) {
  transform: rotateY(285deg) translateZ(8em);
}
.circle:nth-child(20) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(21) {
  transform: rotateY(300deg) translateZ(8em);
}
.circle:nth-child(21) .rotor {
  animation: rotx 15s linear -10s infinite;
}
.circle:nth-child(22) {
  transform: rotateY(315deg) translateZ(8em);
}
.circle:nth-child(22) .rotor {
  animation: rotx 15s linear 0s infinite;
}
.circle:nth-child(23) {
  transform: rotateY(330deg) translateZ(8em);
}
.circle:nth-child(23) .rotor {
  animation: rotx 15s linear -5s infinite;
}
.circle:nth-child(24) {
  transform: rotateY(345deg) translateZ(8em);
}
.circle:nth-child(24) .rotor {
  animation: rotx 15s linear -10s infinite;
}
​
.dot {
  margin: -0.125em;
  width: 0.25em; /* dot diam */
  height: 0.25em;
  backface-visibility: hidden;
}
/* 
 * take the radius of circle to be rc = 3.5em 
 */
.dot:nth-child(1) {  /* i + 1 for i = 0*/
  transform: rotateX(0deg) /* i*360/m for i = 0*/
    translateZ(3.5em); /* rc */
  background: deeppink;
}
.dot:nth-child(2) {
  transform: rotateX(15deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(3) {
  transform: rotateX(30deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(4) {
  transform: rotateX(45deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(5) {
  transform: rotateX(60deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(6) {
  transform: rotateX(75deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(7) {
  transform: rotateX(90deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(8) {
  transform: rotateX(105deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(9) {
  transform: rotateX(120deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(10) {
  transform: rotateX(135deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(11) {
  transform: rotateX(150deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(12) {
  transform: rotateX(165deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(13) {
  transform: rotateX(180deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(14) {
  transform: rotateX(195deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(15) {
  transform: rotateX(210deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(16) {
  transform: rotateX(225deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(17) {
  transform: rotateX(240deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(18) {
  transform: rotateX(255deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(19) {
  transform: rotateX(270deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(20) {
  transform: rotateX(285deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(21) {
  transform: rotateX(300deg) translateZ(3.5em);
  background: cyan;
}
.dot:nth-child(22) {
  transform: rotateX(315deg) translateZ(3.5em);
  background: deeppink;
}
.dot:nth-child(23) {
  transform: rotateX(330deg) translateZ(3.5em);
  background: yellow;
}
.dot:nth-child(24) {
  transform: rotateX(345deg) translateZ(3.5em);
  background: cyan;
}
​
@keyframes rotx {
  to { transform: rotateX(360deg); }
}
​
@keyframes roty {
  to { transform: rotateY(360deg); }
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
thebabydinopro
0viewers