Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

189 lines (165 sloc) 4.872 kb
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, Liberation Sans, sans-serif;
background: #eee;
color: #666;
font-size: .8em;
}
#main {
width: 400px;
margin: 200px auto 0;
}
#blah {
position: absolute;
top: 0;
}
h1, h2 {
text-shadow: 2px 2px 0 #ccc;
}
a {
color: inherit;
}
#bookmarklet, #github {
text-decoration: none;
font-weight: bold;
}
.inverted {
background: #333;
color: #eeeef0;
box-shadow: 0 0 3px #333;
}
#bookmarklet {
font-size: 1.5em;
padding: .3em .5em;
border-radius: .1em;
}
#github {
position: fixed;
top: 65px;
right: -50px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
width: 250px;
text-align: center;
font-size: 1.2em;
padding: .2em;
}
.cube {
float: left;
width: 60px;
height: 60px;
margin: 60px 170px;
position: relative;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
.face {
width: 100%;
height: 100%;
position: absolute;
outline: 1px solid #666;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.f0 {
background: #8686bf;
-moz-transform: rotateY(-90deg) translateZ(30px);
-webkit-transform: rotateY(-90deg) translateZ(30px);
-ms-transform: rotateY(-90deg) translateZ(30px);
-o-transform: rotateY(-90deg) translateZ(30px);
}
.f1 {
background: #bf86be;
-moz-transform: translateZ(30px);
-webkit-transform: translateZ(30px);
-ms-transform: translateZ(30px);
-o-transform: translateZ(30px);
}
.f2 {
background: #bf8686;
-moz-transform: rotateY(90deg) translateZ(30px);
-webkit-transform: rotateY(90deg) translateZ(30px);
-ms-transform: rotateY(90deg) translateZ(30px);
-o-transform: rotateY(90deg) translateZ(30px);
}
.f3 {
background: #bfbd86;
-moz-transform: rotateY(180deg) translateZ(30px);
-webkit-transform: rotateY(180deg) translateZ(30px);
-ms-transform: rotateY(180deg) translateZ(30px);
-o-transform: rotateY(180deg) translateZ(30px);
}
.f4 {
background: #89bf86;
-moz-transform: rotateX(90deg) translateZ(30px);
-webkit-transform: rotateX(90deg) translateZ(30px);
-ms-transform: rotateX(90deg) translateZ(30px);
-o-transform: rotateX(90deg) translateZ(30px);
}
.f5 {
background: #86bfba;
-moz-transform: rotateX(-90deg) translateZ(30px);
-webkit-transform: rotateX(-90deg) translateZ(30px);
-ms-transform: rotateX(-90deg) translateZ(30px);
-o-transform: rotateX(-90deg) translateZ(30px);
}
</style>
</head>
<body>
<div id="blah">
<h1>Touch Bookmarklet</h1>
<p>Simulate touch events (swipe, rotate, pinch) with a mouse, for fun and profit.</p>
<h2>Usage:</h2>
<p>
The bookmarklet creates a panel with a 3D view of a mobile device.<br/>
This mobile device is virtually wrapped in a trackball.<br/>
Manipulating it with the mouse simulates orientation events.
</p>
<br/>
<p><a id="bookmarklet" class="inverted" onclick="return false;" href='javascript:(function(d){var b=document.body,s="script",u="http://louisremi.github.com/orientation-devtool/",x=d.createElement(s),y=d.createElement(s);x.async=false;y.async=false;x.src=u+"lib/froglet.host.js";y.src=u+"orientation.bookmarklet.js";b.appendChild(x);b.appendChild(y);})(document);'>Orientation Bookmarklet</a></p>
<br/>
<p>by <a href="http://twitter.com/louis_remi">@louis_remi</a></p>
</div>
<div id="main">
<div id="c0" class="cube">
<div class="face f0"></div>
<div class="face f1"></div>
<div class="face f2"></div>
<div class="face f3"></div>
<div class="face f4"></div>
<div class="face f5"></div>
</div>
</div>
<a id="github" class="inverted" href="https://github.com/louisremi/orientation-devtool">Fork me on Github</a>
<script>
var cube = $("c0"),
cubeStyle = cube.style,
_Transform = "Transform",
transform = "Moz" + _Transform in cubeStyle ? "Moz" + _Transform :
"Webkit" + _Transform in cubeStyle ? "Webkit" + _Transform :
"ms" + _Transform in cubeStyle ? "ms" + _Transform :
"O" + _Transform in cubeStyle ? "O" + _Transform :
false;
transform && window.addEventListener("deviceorientation", function(e) {
// remember to use vendor-prefixed transform property
cube.style[ transform ] =
"rotateZ(" + ( e.alpha - 180 ) + "deg) " +
"rotateX(" + e.beta + "deg) " +
"rotateY(" + ( -e.gamma ) + "deg)";
});
(function(d){var b=document.body,s="script",u="http://louisremi.github.com/orientation-devtool/",x=d.createElement(s),y=d.createElement(s);x.async=false;y.async=false;x.src=u+"lib/froglet.host.js";y.src=u+"orientation.bookmarklet.js";b.appendChild(x);b.appendChild(y);})(document);
function $(i){return document.getElementById(i)}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.