CSS scale3d() 函数

定义和用法

CSS 的 scale3d() 函数定义了元素的 3D 缩放。

scale3d() 函数定义了元素在 x、y 和 z 方向上的缩放值。

scale3d() 函数在 transform 属性中使用。

实例

例子 1

使用 scale3d() 缩放多个 <div> 元素：

#myDiv1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
  transform: scale3d(1.1, 1.2, 1);
}

亲自试一试

例子 2

使用 scale3d() 缩放图像：

#img1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
  transform: scale3d(1.1, 1.1, 1);
}

亲自试一试

CSS 语法

scale3d(sx, sy, sz)
值 描述
sx 正数或负数，定义宽度的缩放向量。
sy 正数或负数，定义高度的缩放向量。
sz 正数或负数，定义 z 方向的缩放向量。

技术细节

版本： CSS Transforms Module Level 2

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
12 12 10 4 15

หน้าที่เกี่ยวข้อง

ตัวอย่าง:การทำการเปลี่ยนแปลง 3D ของ CSS

อ้างอิง:คุณสมบัติ transform ของ CSS

อ้างอิง:CSS scale นิยาย

อ้างอิง:ฟังก์ชัน scale() ของ CSS

อ้างอิง:ฟังก์ชัน scaleX() ของ CSS

อ้างอิง:ฟังก์ชัน scaleY() ของ CSS