alloytouch
Version:
super tiny size touch and physical motion library for the web
185 lines (154 loc) • 6.35 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>AlloyTouch</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
.big-container {
width: 100%;
height: 400px;
position: absolute;
}
.photo-wrap {
-moz-perspective: 800px;
-ms-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
width: 100%;
}
.photo-container {
width: 250px;
height: 338px;
margin: 0 auto;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.block {
width: 150px;
height: 88px;
left: 50px;
top: 240px;
position: absolute;
font-size: 16px;
line-height: 88px;
text-align: center;
color: #000;
}
.block01 {
-moz-transform: rotateY(0deg) translateZ(220px);
-ms-transform: rotateY(0deg) translateZ(220px);
-o-transform: rotateY(0deg) translateZ(220px);
-webkit-transform: rotateY(0deg) translateZ(220px);
transform: rotateY(0deg) translateZ(220px);
}
.block02 {
-moz-transform: rotateY(40deg) translateZ(220px);
-ms-transform: rotateY(40deg) translateZ(220px);
-o-transform: rotateY(40deg) translateZ(220px);
-webkit-transform: rotateY(40deg) translateZ(220px);
transform: rotateY(40deg) translateZ(220px);
}
.block03 {
-moz-transform: rotateY(80deg) translateZ(220px);
-ms-transform: rotateY(80deg) translateZ(220px);
-o-transform: rotateY(80deg) translateZ(220px);
-webkit-transform: rotateY(80deg) translateZ(220px);
transform: rotateY(80deg) translateZ(220px);
}
.block04 {
-moz-transform: rotateY(120deg) translateZ(220px);
-ms-transform: rotateY(120deg) translateZ(220px);
-o-transform: rotateY(120deg) translateZ(220px);
-webkit-transform: rotateY(120deg) translateZ(220px);
transform: rotateY(120deg) translateZ(220px);
}
.block05 {
-moz-transform: rotateY(160deg) translateZ(220px);
-ms-transform: rotateY(160deg) translateZ(220px);
-o-transform: rotateY(160deg) translateZ(220px);
-webkit-transform: rotateY(160deg) translateZ(220px);
transform: rotateY(160deg) translateZ(220px);
}
.block06 {
-moz-transform: rotateY(200deg) translateZ(220px);
-ms-transform: rotateY(200deg) translateZ(220px);
-o-transform: rotateY(200deg) translateZ(220px);
-webkit-transform: rotateY(200deg) translateZ(220px);
transform: rotateY(200deg) translateZ(220px);
}
.block07 {
-moz-transform: rotateY(240deg) translateZ(220px);
-ms-transform: rotateY(240deg) translateZ(220px);
-o-transform: rotateY(240deg) translateZ(220px);
-webkit-transform: rotateY(240deg) translateZ(220px);
transform: rotateY(240deg) translateZ(220px);
}
.block08 {
-moz-transform: rotateY(280deg) translateZ(220px);
-ms-transform: rotateY(280deg) translateZ(220px);
-o-transform: rotateY(280deg) translateZ(220px);
-webkit-transform: rotateY(280deg) translateZ(220px);
transform: rotateY(280deg) translateZ(220px);
}
.block09 {
-moz-transform: rotateY(320deg) translateZ(220px);
-ms-transform: rotateY(320deg) translateZ(220px);
-o-transform: rotateY(320deg) translateZ(220px);
-webkit-transform: rotateY(320deg) translateZ(220px);
transform: rotateY(320deg) translateZ(220px);
}
.block img {
width: 100%;
}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3; width: 140px; height: 140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<div class="big-container">
<div class="photo-wrap">
<div class="photo-container" id="container">
<div class="block block01">
<img src="../../example/asset/ci1.jpg" alt="" /></div>
<div class="block block02">
<img src="../../example/asset/ci2.jpg" alt="" /></div>
<div class="block block03">
<img src="../../example/asset/ci3.jpg" alt="" /></div>
<div class="block block04">
<img src="../../example/asset/ci4.jpg" alt="" /></div>
<div class="block block05">
<img src="../../example/asset/ci5.jpg" alt="" /></div>
<div class="block block06">
<img src="../../example/asset/ci6.jpg" alt="" /></div>
<div class="block block07">
<img src="../../example/asset/ci7.jpg" alt="" /></div>
<div class="block block08">
<img src="../../example/asset/ci8.jpg" alt="" /></div>
<div class="block block09">
<img src="../../example/asset/ci9.jpg" alt="" /></div>
</div>
</div>
</div>
<script src="../../transformjs/transform.js"></script>
<script src="../../index.js"></script>
<script>
var container = document.querySelector("#container");
Transform(container, true);
new AlloyTouch({
touch: ".big-container",//反馈触摸的dom
vertical: false,//不必需，默认是true代表监听竖直方向touch
target: container, //运动的对象
property: "rotateY",
step: 40
})
</script>
</body>
</html>