Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
    <title>pinch and rotate</title>
 
<style>
#theDiv {position: absolute; top: 200px; left: 200px; height: 150px; width: 250px;
         border: 2px solid brown; padding: 10px; background-color: #ffcc99;
         text-align: center;
}
</style>
 
<script type="text/javascript">
var angle = 0;
var newAngle;
var scale = 1;
var newScale;
 
function saveChanges() {
    angle = newAngle;
    scale = newScale;
}
function getAngleAndScale(e) {
    // Don't zoom or rotate the whole screen
    e.preventDefault();
    // Rotation and scale are event properties
    newAngle = angle + e.rotation;
    newScale = scale * e.scale;
    // Combine scale and rotation into a single transform
    var tString = "rotate(" + newAngle + "deg) scale(" + newScale + ")";
    document.getElementById("theDiv").style.webkitTransform = tString;
}
function init() {
    // Set scale and rotation during gestures
    document.getElementById("theDiv").addEventListener("gesturechange", getAngleAndScale, false);
    // Preserve scale and rotation when gesture ends
    document.getElementById("theDiv").addEventListener("gestureend", saveChanges, false);
}
</script>
</head>
 
<body onload="init();">
<div id="theDiv">
<p> Pinch in to shrink. </p>
<p> Pinch out to grow. </p>
<p> Twirl to rotate. </p>
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers