Question

为什么决定将所有转换属性添加到一个css属性？

而不是：

.element {
    transform: translateX(50%) rotateZ(45deg) scale(0.8);
}

可写：

.element {
    translate-x: 50%;
    rotate-z: 45deg;
    scale: 0.8;
}

为什么选择第一个变体？这是否与转换矩阵有某种联系？或前缀？

例如，当您编写media queries时，您需要复制整个transform属性（而不是DRY），在其他情况下，它将被覆盖。创建转换，切换状态等时出现同样的问题......这真的很不舒服。

欢迎解释现场背后发生的事情。

Answer 1

因为它不仅仅是一组属性，而是一个列表，其中转换按顺序应用，并且单个转换类型可以在列表中多次出现。

所以你可以这样做：

div {
  height:100px;
  width: 100px;
}
.one {
  background-color:red;
  transform:translate(50%,5%) scale(0.5)
    rotate(45deg) translate(50px,10px)
}
.two {
  background-color:blue;
  transform:scale(0.5) translate(50%,5%)
    rotate(45deg) translate(50px,10px)
}

<div class="one"></div>
<div class="two"></div>

你可以看到钻石的X位置受到变换应用顺序的影响。

为什么css转换属性不是单独的css属性？

1 个答案: