Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <h1>Animating with CSSMatrix</h1>
</body>
</html>
 
.moved {
  background: red;
  width: 20px;
  height: 20px;
  margin: 1px;
  display: inline-block;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #333;
  color: #FFF;
}
 
var divs = [];
var size = 1000;
for (var d = 0; d < size; d++) {
  div = document.createElement('div');
  div.className = 'moved';
  div.matrix = new WebKitCSSMatrix();
  div.x = 0;
  div.y = 0;
  div.z = 0;
  divs.push(div);
  document.body.appendChild(div);
}
function update() {
  
  var div, matrix;
  for (var d = 0; d < size; d++) {
    div = divs[d];
    div.x++, div.y++, div.z++;
    
    div.matrix.m41 = div.x;
    div.matrix.m42 = div.y;
    div.matrix.m43 = div.z;
    
    div.style.webkitTransform = div.matrix;
  }
  
  webkitRequestAnimationFrame(update);
}
document.body.addEventListener('click', function(){
  webkitRequestAnimationFrame(update);
}, false);
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers