transformOrigin 사용 JavaScript의 속성을 사용하여 변환된 요소의 위치를 변경합니다.
예시
다음 코드를 실행하여 JavaScript로 변환된 요소의 위치를 반환할 수 있습니다. −
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; margin: auto; height: 200px; width: 200px; padding: 20px; border: 2px solid blue; perspective: 100px; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateX(45deg); } #div3 { padding: 50px; position: absolute; border: 2px solid BLUE; background-color: green; transform: rotateX(30deg); } </style> </head> <body> <p>Change the property of div</p> <button onclick = "display()"> Set Perspective Origin Position </button> <div id = "div1"> DIV1 <div id = "div2">DIV2</div> <div id = "div3">DIV3 </div> </div> <script> function display() { document.getElementById("div1").style.perspectiveOrigin = "20px 10%"; document.getElementById("div2").style.transformOrigin = "0 0"; } </script> </body> </html>