Skip to content

Instantly share code, notes, and snippets.

@vpj
Last active August 29, 2015 14:01
Show Gist options
  • Save vpj/c5468e4593319009320e to your computer and use it in GitHub Desktop.
Save vpj/c5468e4593319009320e to your computer and use it in GitHub Desktop.
TopLeft vs webkitTransform

TopLeft vs webkitTransform

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#view {
position: relative;
height: 400px;
width: 962px;
background: #eee;
overflow: hidden;
}
#content {
position: relative;
top: 0px;
left: 0px;
width: 2000px;
height: 2000px;
}
.box {
position: absolute;
width: 40px;
height: 40px;
background: rgba(255, 50, 50, 0.1);
border: 1px solid rgba(200, 200, 200, 0.3);
}
</style>
<body>
<div id="view">
<div id="content">
</div>
</div>
<select id="move">
<option value="topLeft">Position:Top/Left</option>
<option value="matrix">Transform:Matrix</option>
<option value="matrix3d">Transform:Matrix3d</option>
</select>
<script type="text/javascript" src="//rawgit.com/vpj/weya/master/weya.js"></script>
<script>
// Generated by CoffeeScript 1.7.1
(function() {
var Ax, Ay, T, X, Y, elem, move, select, setPosition, template, transform, updatePosition;
template = function() {
var i, _i, _results;
_results = [];
for (i = _i = 0; _i < 10000; i = ++_i) {
_results.push(this.div(".box", {
style: {
top: "" + (parseInt(2000 * Math.random())) + "px",
left: "" + (parseInt(2000 * Math.random())) + "px"
}
}));
}
return _results;
};
elem = document.getElementById("content");
Weya({
elem: elem
}, template);
Ax = 0.002;
Ay = 0.001;
X = 0;
Y = 0;
T = (new Date).getTime();
transform = {
topLeft: function() {
elem.style.top = "" + (parseInt(Y)) + "px";
return elem.style.left = "" + (parseInt(X)) + "px";
},
matrix: function() {
return elem.style.webkitTransform = "matrix(1, 0, 0, 1, " + X + ", " + Y + ")";
},
matrix3d: function() {
return elem.style.webkitTransform = "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, " + X + ", " + Y + ", 0, 1)";
}
};
move = function() {
setPosition();
updatePosition();
return window.requestAnimationFrame(move);
};
updatePosition = function() {
var t;
t = (new Date).getTime() - T;
X = 100 * (-1 + Math.sin(Ax * t));
return Y = 100 * (-1 + Math.sin(Ay * t));
};
setPosition = transform.topLeft;
select = document.getElementById('move');
select.addEventListener('change', function(e) {
return setPosition = transform[select.value];
});
window.requestAnimationFrame(move);
}).call(this);
</script>
</body>
Copy link

ghost commented May 11, 2014

nice dude , in fact i understand this in css3 (how to work) , can u tell me how to start learning or practicing to go forward in js ?

@vpj
Copy link
Author

vpj commented May 11, 2014

Thanks. Didn't get your question? This is a performance test between transform: matrix3d and top/left positioning. You can see it running at http://bl.ocks.org/vpj/c5468e4593319009320e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment