Tỷ lệ 3D trong CSS là gì?

Thuộc tính scale trong CSS thay đổi kích thước chiều rộng và chiều cao của phần tử theo tỷ lệ. Vì vậy, nếu chúng ta có một phần tử có kích thước 100 pixel vuông, thì việc nhân rộng nó lên với giá trị 2 sẽ nhân đôi kích thước thành 200 pixel vuông. Tương tự, giá trị tỷ lệ của .5 giảm kích thước xuống một nửa, dẫn đến hình vuông 50 pixel

.element {
  width: 20px;
  height: 20px;
  scale: 2; /* Results in 40 pixels square */
}

Tình cờ có một cách khác để chia tỷ lệ các phần tử, sử dụng hàm scale() trên thuộc tính transform, á la

.element {
  width: 20px;
  height: 20px;
  transform: scale(2); /* Results in 40 pixels square */
}

…thuộc tính CSS scale thực hiện điều đó một cách độc lập với thuộc tính transform, giúp chúng tôi linh hoạt hơn một chút để mở rộng quy mô mọi thứ mà không cần phải xâu chuỗi hiệu ứng với các biến đổi khác

cú pháp

scale: none | <number>{1,3};

Thuộc tính scale chấp nhận từ khóa

.element {
  width: 20px;
  height: 20px;
  transform: scale(2); /* Results in 40 pixels square */
}

.element {
  width: 20px;
  height: 20px;
  transform: scale(2); /* Results in 40 pixels square */
}

• Ban đầu.

  .element {
    width: 20px;
    height: 20px;
    transform: scale(2); /* Results in 40 pixels square */
  }

  3
• Áp dụng đối với. yếu tố có thể biến đổi
• Thừa hưởng. không
• Giá trị tính toán. theo quy định
• loại hoạt hình. một biến đổi
• Tạo bối cảnh xếp chồng. Vâng

giá trị

/* Keyword values */
scale: none;

/* Single values */
scale: 2;
scale: 0.25;

/* Two values */
scale: 2 1;

/* Three values */
scale: 1 1.5 2;

/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: unset;

• .element {
    width: 20px;
    height: 20px;
    transform: scale(2); /* Results in 40 pixels square */
  }

  3. Điều này có nghĩa là không áp dụng tỷ lệ cho phần tử;

• .element {
    width: 20px;
    height: 20px;
    transform: scale(2); /* Results in 40 pixels square */
  }

  8. Điều này nói rằng thuộc tính chấp nhận tối đa ba giá trị được sử dụng để nhân các kích thước của phần tử

Chia tỷ lệ không làm biến dạng luồng bố cục tự nhiên

Điều quan trọng cần biết là thuộc tính scale không khiến các phần tử khác chạy xung quanh nó giống như hàm biến đổi scale(). Điều đó có nghĩa là tỷ lệ của một phần tử không dẫn đến việc các phần tử xung quanh nó được chỉnh lại dòng để tạo thêm (hoặc ít hơn) không gian có sẵn dựa trên tỷ lệ của phần tử đó

Dự phòng nhúng CodePen

Chia tỷ lệ ảnh hưởng đến các phần tử con và con cháu

Một điều khác cần lưu ý là thuộc tính scale chia tỷ lệ cho tất cả các phần tử con của phần tử. Ví dụ: giả sử chúng ta có văn bản bên trong phần tử. Thay đổi tỷ lệ phần tử chia tỷ lệ cả phần tử và văn bản

Dự phòng nhúng CodePen

Chuyển tiếp và hình ảnh động

Và, vâng, chúng ta có thể sử dụng scale trong các hiệu ứng chuyển tiếp và hoạt ảnh CSS. Ví dụ: chúng ta có thể làm cho bất kỳ phần tử nào chuyển đổi suôn sẻ giữa các tỷ lệ trên, chẳng hạn như di chuột

Dự phòng nhúng CodePen

Thậm chí, chúng ta có thể sáng tạo hơn một chút khi kết hợp scale với các thuộc tính biến đổi độc lập khác, chẳng hạn như

scale: none | <number>{1,3};

Dự phòng nhúng CodePen

dự phòng

Mặc dù hỗ trợ trình duyệt đang được xây dựng cho thuộc tính CSS scale và các thuộc tính biến đổi độc lập khác, nhưng có lẽ bạn nên kiểm tra hỗ trợ khi sử dụng scale

Hàm CSS scale3d() sửa đổi kích thước của một phần tử. Vì lượng tỷ lệ được xác định bởi một vectơ, nó có thể thay đổi kích thước các kích thước khác nhau ở các tỷ lệ khác nhau

<p>foo</p>
<p class="transformed">bar</p>

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
  background-color: blue;
}

<p>foo</p>
<p class="transformed">bar</p>

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scale3d(2, 3, 0);
  transform-origin: center;
  background-color: blue;
}

scale3d(sx, sy, sz)