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
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Rotate & Width</title>
​
<style>
    
    #rotated {
    background:red;
    border:1px dotted #999999;
    height:100px;
    width: 200px;
    position:absolute;
    top:300px;
    left:100px;
    -webkit-transform: rotate(66deg);
    }
  
  
  #width {
    position:absolute;
    top:150px;
    width: 200px;}
  
    #height {
    position:absolute;
    top:100px;
    width: 200px;}
​
</style>
  
  <script>
    $(document).ready(function () {
      document.getElementById("width").onchange = function () {
      var value = this.value;
        
        document.getElementById("rotated").style.width = value+"px";
        
      }
        
       document.getElementById("height").onchange = function () {
      var value = this.value;
        
        document.getElementById("rotated").style.height = value+"px";
        
      }
      });
  </script>
  
</head>
<body>
  <div id="wrap">
    <div id="rotated">Rotated Div</div>
     <input id="width" type="range" name="slider1" min="20" max="400" step="1" value="200">
    <input id="height" type="range" name="slider1" min="20" max="400" step="1" value="200">
  </div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers