Thuộc tính transformOrigin của HTML DOM Style

Thuộc tính style.transformOrigin trong HTML DOM cho phép lấy hoặc thiết lập gốc tọa độ (điểm neo) cho các phép biến đổi 2D hoặc 3D được áp dụng lên một phần tử HTML.

Cú pháp

Lấy giá trị transformOrigin

object.style.transformOrigin

Thiết lập giá trị transformOrigin

object.style.transformOrigin = "giá_trị"

Các giá trị hợp lệ

Ví dụ minh họa

Dưới đây là ví dụ thay đổi gốc biến đổi của một hộp màu đỏ khi nhấn nút:

<!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>Ví dụ thuộc tính transformOrigin</h1>
<div class="box"></div>
<button onclick="add()" class="btn">Thay đổi 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>

Kết quả

Ban đầu hộp đỏ hiển thị bình thường. Sau khi nhấn nút "Thay đổi transformOrigin", gốc biến đổi được đặt về góc trên bên trái (0 0), khiến phép xoay và dịch chuyển diễn ra quanh điểm đó thay vì trung tâm.