Using CSS set a rotated element's base placement.
#div1 { position: relative; height: 200px; width: 200px; margin: 50px; padding:10px; border: 1px solid black; } #div2 { color: white; padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ }
Complete Code For Using CSS Transform Origin Property With HTML.
<html> <head> <title>How To Use CSS Transform Origin Property With HTML</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> </head> <style> body { background: #c7254e; } #div1 { position: relative; height: 200px; width: 200px; margin: 50px; padding:10px; border: 1px solid black; } #div2 { color: white; padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ } .well{ display: flex; } .padding{ padding: 60px; } input[type=range] { -webkit-appearance: none; margin: 10px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 12.8px; cursor: pointer; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #51A351; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; -webkit-appearance: none; margin-top: -3.6px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #51A351; } input[type=range]::-moz-range-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #51A351; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 39px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: #51A351; } input[type=range]:focus::-ms-fill-upper { background: #51A351; } body { padding: 30px; } </style> <body> <br/><br/> <div class="container"> <br> <div class="text-center"> <h1 id="color" style="color: white;">CSS Transform Origin Property With HTML</h1> </div> <br> <div class="col-md-12"> <div class="well"> <div> <p>Rotate the red div element, try changing its X-axis and Y-axis:</p> <div id="div1"> <div id="div2">HELLO</div> </div> </div> <div class="padding" > Rotate: <input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" /> transform: rotateY:(<span id="persp">45deg</span>); <br><br> X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br> Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" /> transform-origin: <span id="origin">20% 40%</span>; </div> </div> </div> </div> </body> </html> <script> function changeRot(value) { document.getElementById('div2').style.transform="rotate(" + value + "deg)"; document.getElementById('div2').style.msTransform="rotate(" + value + "deg)"; document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)"; document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)"; document.getElementById('div2').style.OTransform="rotate(" + value + "deg)"; document.getElementById('persp').innerHTML=value + "deg"; } function changeOrg() { var x=document.getElementById('ox').value; var y=document.getElementById('oy').value; document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%'; document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%'; document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%'; document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%'; document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%'; document.getElementById('origin').innerHTML=x + "% " + y + "%"; } </script>