Sử dụng thuộc tính transform-origin với CSS

Sử dụng thuộc tính transform-origin để thay đổi vị trí trên các phần tử biến đổi với CSS.

Ví dụ

Bạn có thể chạy mã sau để tìm hiểu cách làm việc với thuộc tính transform-origin với CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
      .demo2 {
        width: 200px;
        height: 200px;
        background-color: orange;
      }
      .demo3 {
        width: 100px;
        height: 100px;
        background-color: blue;
        transform: rotate(10deg);
        transform-origin: 30% 40%;
      }
    </style>
  </head>
  <body>
    <h1>Xoay 3D</h1>
    <div class="demo1">Demo
      <div class="demo2">Demo
        <div class="demo3">
          Demo
        </div>
      </div>
    </div>
  </body>
</html>