Sử dụng TransitOrigin thuộc tính trong JavaScript để thay đổi vị trí của các phần tử được chuyển đổi.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để trả lại vị trí của các phần tử được chuyển đổi bằng 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>