scale3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hàm scale3d() CSS function định nghĩa một phép biến đổi thay đổi kích thước phần tử trong không gian 3D. Vì lượng tỉ lệ được xác định bởi vectơ [sx, sy, sz], nó có thể thay đổi kích thước theo các chiều khác nhau với các tỉ lệ khác nhau. Kết quả của hàm là kiểu dữ liệu <transform-function>.

Try it

transform: scale3d(1, 1, 1);

transform: scale3d(1.3, 1.3, 1.3);

transform: scale3d(0.5, 1, 1.7);

transform: scale3d(-1.4, 0.4, 0.7);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Phép biến đổi tỉ lệ này được đặc trưng bởi một vectơ ba chiều. Tọa độ của nó xác định lượng tỉ lệ thực hiện theo mỗi chiều. Nếu cả ba tọa độ bằng nhau, tỉ lệ là đồng đều (đẳng hướng) và aspect ratio của phần tử được giữ nguyên (đây là phép biến đổi đồng dạng).

Khi giá trị tọa độ nằm ngoài phạm vi [-1, 1], phần tử lớn ra theo chiều đó; khi nằm bên trong, nó thu nhỏ lại. Nếu giá trị âm, kết quả là phép đối xứng qua điểm theo chiều đó. Giá trị 1 không có tác dụng.

Cú pháp

css

scale3d(sx, sy, sz)

Giá trị

sx: Là <number> biểu thị hoành độ (nằm ngang, thành phần x) của vectơ tỉ lệ.
sy: Là <number> biểu thị tung độ (thẳng đứng, thành phần y) của vectơ tỉ lệ.
sz: Là <number> biểu thị thành phần z của vectơ tỉ lệ.

Tọa độ Descartes trên ℝ^2	Tọa độ đồng nhất trên ℝℙ^2	Tọa độ Descartes trên ℝ^3	Tọa độ đồng nhất trên ℝℙ^3
Phép biến đổi này áp dụng cho không gian 3D và không thể biểu diễn trên mặt phẳng.		$\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{array} \right)$	$\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$

Cú pháp chính thức

<scale3d()> = 
  scale3d( [ <number> | <percentage> ]#{3} )

Ví dụ

Không thay đổi gốc tọa độ

HTML

html

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}

Kết quả

Dịch chuyển gốc của phép biến đổi

HTML

html

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}

Kết quả

Thông số kỹ thuật

Specification
CSS Transforms Module Level 2 # funcdef-scale3d

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content