Biến đổi kiểu DOM HTML

Thuộc tính HTML style DOM variableOrigin trả về và áp dụng phép chuyển đổi 2D hoặc 3D cho một phần tử trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

Trả lại chuyển đổiOrigin

object.style.transformOrigin

Đang sửa đổi biến đổi

object.style.transformOrigin = “value”

Giá trị

Ở đây, giá trị có thể là -

Giá trị	Giải thích
kế thừa	Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
tên đầu tiên	Nó đặt giá trị thuộc tính này thành giá trị mặc định.
trục z trục x trục y	Nó đặt nơi chế độ xem được đặt dọc theo trục x, trục y và trục z tương ứng.

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính HTML DOM style variableOrigin -

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   .box {
      background: lightcoral;
      width: 200px;
      height: 200px;
      margin: 2rem auto;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
</head>
<body>
<h1>DOM Style transformOrigin Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Change transformOrigin</button>
<script>
   function add() {
      document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
      document.querySelector('.box').style.transformOrigin = "0 0";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Biến đổi kiểu DOM HTML

Nhấp vào “ Thay đổi chuyển đổi ”Để thay đổi nguồn gốc của phép biến đổi cho hộp màu đỏ.