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>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
​
<div id="perspective">
  <div id="container"></div>
</div>
​
 
#perspective {
  margin-left: 100px;
  width: 300px;
  height: 300px;
  perspective: 600px;
}
​
#container {
  width: 300px;
  height: 300px;
  line-height: 0;
  transform-style: preserve-3d;
}
​
.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: black;
}
 
// Generating animations
// ---------------------
container.animate({
  transform: [
    'rotateX(60deg) rotateZ(0deg)',
    'rotateX(60deg) rotateZ(360deg)',
  ],
}, {
  duration: 20000,
  iterations: Infinity,
});
​
for (var y = -7; y <= 7; y++) {
  for (var x = -7; x <= 7; x++) {
    var box = createBox();
    box.animate({
      transform: [
        'translateZ(0px)',
        'translateZ(20px)',
      ],
      opacity: [1, 0],
    }, {
      delay: (x*x + y*y) * 20,
      duration: 2000,
      iterations: Infinity,
      direction: 'alternate',
      easing: 'ease-in',
    });
  }
}
​
function createBox() {
  var box = document.createElement('div');
  box.className = 'box';
  container.appendChild(box);
  return box;
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers