alloyfinger
Version:
super tiny size multi-touch gestures library for the web.
106 lines (93 loc) • 3.41 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>
<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:#c71585;left:200px;top:400px; ">
transformjs
</div>
<div id="test10" class="test" style="background-color:#32cd32;left:400px;top:400px; ">
transformjs
</div>
</div>
<script src="transform.js"></script>
<script>
//----------------how to use---------------------------------
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);
Transform(element4);
Transform(element5);
Transform(element6);
Transform(element7);
Transform(element8);
Transform(element9);
Transform(element10);
element8.originZ = -150;
element4.originX = -50;
element4.originY = -50;
var step = 0.02, xStep = 3;
setInterval(function () {
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++;
element10.skewY++;
}, 15);
//------------------------------------------------------------
</script>
</body>
</html>