[CSS] Demo - transform(rotate) from transformOrigin

PS.
Not support IE9


rotate: deg (0deg)
originX: px       originY: px

Source

rotate: <input onchange="changeRotate(this);" type="range" maxlength="3" size="3" value="0" min="0" max="360"/>deg
<br/>
originX: <input onchange="changeOriginX(this);" type="range" maxLength="3" size="3" value="100" min="0" max="200"/>px
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
originY: <input onchange="changeOriginY(this);" type="range" maxLength="2" size="2" value="25" min="0" max="50"/>px

<br/>
<div id="wrapperDiv">
<div id="rotateDiv" style="position:relative; width:200px; height:50px; border:1px solid black; background-color:aqua;">
<div id="originDiv" style="position:absolute; width:1px; height:1px; left:100px; top:25px; border:2px solid red;"></div>
</div>
</div>


<script type="text/javascript">
var rotateValue = 0, originX = 0, originY = 0;

var rotateDiv = document.getElementById('rotateDiv');
var originDiv = document.getElementById('originDiv');

function changeRotate(rotate) {
 if (rotateValue == rotate.value) {
  return false;
 }
 rotate.value = rotateValue = rotate.value == '' ? 0 : parseInt(rotate.value);
 
 rotateDiv.style.transform = 'rotate('+rotate.value+'deg)';
 rotateDiv.style.MozTransform = 'rotate('+rotate.value+'deg)';
 rotateDiv.style.webkitTransform = 'rotate('+rotate.value+'deg)';
}

function changeOriginX(x) {
 if (originX == x.value) {
  return false;
 } else if (x.value == '' || x.value < 0 || x.value > 200) {
  x.value = originX;
  return false;
 }
 x.value = originX = parseInt(x.value);
 originDiv.style.left = x.value + 'px';
 setOrigin();
}

function changeOriginY(y) {
 if (originY == y.value) {
  return false;
 } else if (y.value == '' || y.value < 0 || y.value > 50) {
  y.value = originY;
  return false;
 }
 y.value = originY = parseInt(y.value);
 originDiv.style.top = y.value + 'px';
 setOrigin();
}

function setOrigin() {
 rotateDiv.style.transformOrigin = originX + 'px ' + originY + 'px';
 rotateDiv.style.MozTransformOrigin = originX + 'px ' + originY + 'px';
 rotateDiv.style.webkitTransformOrigin = originX + 'px ' + originY + 'px';
}


</script>
<style type="text/css">
#wrapperDiv {
 width: 100%; height: 500px;
 border: 2px solid red;
}
#rotateDiv {
 left: 250px; top: 250px;
}
</style>