Thay đổi vị trí trên phần tử biến đổi với CSS

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

Ví dụ

Bạn có thể chạy mã sau để thay đổi vị trí:

<!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>