CSS中多个transform变换为何无需逗号分隔？

这个问题问得特别戳中CSS语法设计的核心逻辑——不同属性的「多值」本质完全不一样，咱们拆开说清楚：

• background是「多重独立层」的列表
  background的多值是用来定义多个独立的背景图层，每个逗号分隔的部分都是一套完整的背景配置（可以包含图片路径、位置、重复方式、尺寸等）。比如：

  background: url(bg-top.png) center top no-repeat, url(bg-bottom.png) center bottom no-repeat;
  

  这里的逗号把两个完全独立的背景层分开，它们各自占据不同的绘制层级，互不干扰。这类属性（比如box-shadow、transition）的多值都是「多个独立项」，所以用逗号做分隔符。

• transform是「单一变换操作」的多步骤组合
  transform的多值其实是对同一个元素施加的一系列变换函数，这些函数是按顺序执行的（比如先旋转再缩放，和先缩放再旋转的结果完全不同），它们属于同一个变换操作的不同步骤，不是独立的“项”。CSS规范里给transform的语法定义就是<transform-function>+（+表示至少一个函数，用空格分隔）。比如：

  transform: rotate(30deg) scale(1.2) translate(20px);
  

  这里的空格表示“接着执行下一个变换”，如果强行用逗号，浏览器会把它当成无效语法直接忽略——因为transform并不支持多个独立的变换“层”。

再举个同类对比：filter属性和transform逻辑一致，多个滤镜函数也是用空格分隔（filter: blur(5px) grayscale(50%);），因为它们是对同一个元素的视觉效果做叠加处理，而非多个独立的滤镜层。

总结一下：逗号用来分隔多个独立的属性单元，空格用来分隔同一个单元内的多个操作步骤——这就是两者的核心区别啦！

内容的提问来源于stack exchange，提问作者Poogy