CSS | scale3d()函数介绍

简介

CSS的scale3d()函数用于对元素进行三维缩放变换。它可以通过指定X轴、Y轴和Z轴上的缩放比例，实现元素在三个维度上的缩放效果。

语法

transform: scale3d(scaleX, scaleY, scaleZ);

• scaleX: 指定X轴上的缩放比例。默认值为1，表示无缩放。
• scaleY: 指定Y轴上的缩放比例。默认值为1，表示无缩放。
• scaleZ: 指定Z轴上的缩放比例。默认值为1，表示无缩放。

示例

.box {
  transform: scale3d(1.2, 0.8, 1.5);
}

上述代码将.box元素在X轴上放大1.2倍，Y轴上缩小0.8倍，Z轴上放大1.5倍。

注意事项

• 缩放比例为1表示无缩放，小于1表示缩小，大于1表示放大。
• 缩放比例可为负数，当为负数时会水平或垂直翻转元素。
• scale3d()函数是CSS的变换属性transform的一部分，需配合其他变换属性一起使用。

浏览器兼容性

scale3d()函数的兼容性如下：

• Chrome: 36+
• Firefox: 16+
• Safari: 9+
• Opera: 23+
• Edge: 12+
• Internet Explorer: 不支持

在使用时请根据实际需求选择是否使用兼容性前缀。

参考链接

• MDN 文档 | transform
• W3C 文档 | CSS Transforms Module