alloytouch
Version:
super tiny size touch and physical motion library for the web
132 lines (109 loc) • 4.08 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#ctt .test {
width: 100px;
height: 100px;
color: white;
line-height: 100px;
text-align: center;
display: inline-block;
margin-top: 30px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="//alloyteam.github.io/github.png" alt="" />
</a>
<div style="text-align: center; position: relative; left: 100px; top: 100px;" id="ctt">
<div id="test1" class="test" style="background-color: green;">
transformjs
</div>
<div id="test2" class="test" style="background-color: red; left: 200px;">
transformjs
</div>
<div id="test3" class="test" style="background-color: blue; left: 400px">
transformjs
</div>
<div id="test4" class="test" style="background-color: #ff6a00; left: 600px">
transformjs
</div>
<div id="test5" class="test" style="background-color: #485f0f; left: 400px; top: 200px;">
transformjs
</div>
<div id="test6" class="test" style="background-color: #485f0f; left: 0; top: 200px;">
transformjs
</div>
<div id="test7" class="test" style="background-color: #291996; left: 200px; top: 200px;">
transformjs
</div>
<div id="test8" class="test" style="background-color: #291996; left: 600px; top: 200px;">
transformjs
</div>
<div id="test9" class="test" style="background-color: #291996; left: 200px; top: 400px;">
transformjs
</div>
<div id="test10" class="test" style="background-color: #291996; left: 400px; top: 400px;">
transformjs
</div>
</div>
<script src="../transform.js"></script>
<script>
var element1 = document.querySelector("#test1");
var element2 = document.querySelector("#test2");
var element3 = document.querySelector("#test3");
var element4 = document.querySelector("#test4");
var element5 = document.querySelector("#test5");
var element6 = document.querySelector("#test6");
var element7 = document.querySelector("#test7");
var element8 = document.querySelector("#test8");
var element9 = document.querySelector("#test9");
var element10 = document.querySelector("#test10");
Transform(element1);
Transform(element2);
Transform(element3, true);
Transform(element4);
Transform(element5);
Transform(element6);
Transform(element7);
Transform(element8);
Transform(element9);
Transform(element10);
element8.originX = -150;
element4.originX = -50;
element4.originY = -50;
var step = 0.02,
xStep = 3,
skewStep = 1;
function animate() {
element1.rotateZ++;
element2.rotateY++;
element3.rotateX++;
element4.rotateZ++;
element5.rotateY++;
element5.rotateX++;
element7.translateX < -50 && (xStep *= -1);
element7.translateX > 50 && (xStep *= -1);
element7.translateX += xStep;
element6.scaleX < 0.5 && (step *= -1);
element6.scaleX > 1.5 && (step *= -1);
element6.scaleX += step;
element6.scaleY += step;
element8.rotateY++;
element8.rotateX++;
element9.skewX > 30 && (skewStep *= -1);
element9.skewX < -30 && (skewStep *= -1);
element9.skewX += skewStep;
element10.skewY += skewStep;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>