Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> #DIV1 { height: 200px; width: 200px; margin: auto; border: 1px solid black; } #DIV2 { width: 150px; height: 150px; border: 1px solid black; background-color: coral; -ms-transform: rotate(45deg); /* IE 9 */ transform: rotate(45deg); } #DIV2original { position: absolute; width: 150px; height: 150px; border: 1px dashed grey; background-color: lightgrey; opacity: 0.5; } </style> </head> <body> <h1>Change transform-origin with JavaScript</h1> <p>单击“试一试”按钮，将 x 轴和 y 轴的旋转原点都设置为 0：</p> <p><b>注意：</b>灰色 DIV 元素指示 DIV2 元素在没有转换的情况下的位置。</p> <button onclick="myFunction()">试一试</button> <div id="DIV1">DIV1 <div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div> </div> <script> function myFunction() { document.getElementById("DIV2").style.msTransformOrigin = "0 0"; // IE9 document.getElementById("DIV2").style.transformOrigin = "0 0"; } </script> </body> </html>