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)

技术细节

浏览器支持

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

相关页面

教程：CSS 3D 变换

参考：CSS transform 属性

参考：CSS scale 属性

参考：CSS scale() 函数

参考：CSS scaleX() 函数

参考：CSS scaleY() 函数