css 独立变换属性

介绍

css 的变换属性transform和动画属性anmition一起出现在web技术上，用来在界面上添加动画效果。十多年来，这些技术一直是web平台和前端开发人员的主要工具。实际上，css的transform属性早在08年7月iPhoneOS2.0 发布的时候就在Safari中支持了。

有可能诞生的新属性

在Safari技术预览版 及 Chrome的金丝雀版本中已经默认开启了 css 变换的独立属性。动画及变换属性的使用似乎变得更加简单。

div.transform-property {
    transform: translate(100px, 100px) rotate(180deg) scale(2);
}

div.individual-properties {
    translate: 100px 100px;
    rotate: 180deg;
    scale: 2;
}

为什么使用独立变换属性

但是为什么要在transform属性上使用这些新属性呢？一个原因是方便，因为编写scale:2而不是transform:scale（2）更简单，因为我们只想缩放元素。

但这里最吸引人的地方是你现在可以自由地组合那些你认为合适的各种变换属性。例如，您可以轻松地编写一个CSS类来使用scale属性翻转元素，而不必担心会覆盖其他与转换相关的属性：

.scaled{
	scale: -1;
}

即使rotate或transform属性对元素应用了旋转，scaled的class也能正常工作。

在设置变换动画时，此功能也很方便。假设您正在编写一个动画，该动画在元素的整个持续时间内按比例放大，但同时对该动画的后半部分应用旋转。使用transform，property，必须预先计算旋转开始和结束时比例的中间值：

@keyframes scale-and-rotate {
    0%   { transform: scale(1) }
    50%  { transform: scale(1.5) rotate(0deg) }
    100% { transform: scale(2) rotate(180deg) }
}

虽然这看起来并不是什么大问题，但对这些关键帧进行任何进一步的更改都需要重新计算这些值。现在，考虑使用独立变换属性编写的相同动画

@keyframes scale-and-rotate {
    0%   { scale: 0 }
    50%  { rotate: 0deg } 
    100% { scale: 1; rotate: 180deg; }
}

我们可以根据需要轻松更改关键帧和添加其他特性，而让浏览器自行决定如何正确应用这些变换特性

但这并不是全部；还有一种情况是，您希望单独的动画同时应用于元素。您可以将这一组关键帧拆分为两组不同的关键帧，并调整计时：

.animated {
    /* Apply the scale keyframes for 1s and the rotate
       keyframes for 500ms with a 500ms delay. */
    animation: scale 1s, rotate 500ms 500ms;
}

@keyframes scale {
    from { scale: 0 }
    to   { scale: 1 }
}

@keyframes rotate {
    from { rotate: 0deg }
    to   { rotate: 180deg }
}

应用于变换的关键帧不仅更易于编写，而且可以通过组合多个变换动画来更好地分离计时和关键帧。如果你是一个经验丰富的CSS动画开发人员，当你考虑到计时函数时，你就会知道这有多重要。

此外，为新的单个变换属性设置动画将保留与设置变换属性具有相同的出色性能，因为这些属性支持硬件加速。

transform 和新的独立属性的关系

首先，请记住transform属性支持不表示为单个转换属性的转换函数。skew（）、skewX（）和skewY（）函数没有等效的CSS属性，也没有与matrix（）函数等效的属性。

但是当您指定一些单独的变换属性以及变换属性时会发生什么呢？CSS Transform Level 2规范解释了如何组合各个转换属性以及转换原点和转换属性，以形成当前的转换矩阵。总而言之，首先应用独立变换属性（translate、rotate和scale），然后应用变换属性transform中的函数。

这意味着有一个清晰的模型可以将这些单独的转换属性和转换属性一起使用，以增强您在Web平台上转换内容的能力。

在开始使用这些新属性之前，您必须知道如何检测它们的可用性并使用transform作为备用。@supports规则将允许您执行您需要的操作：

@supports (translate: 0) {
    /* Individual transform properties are supported */
    div {
        translate: 100px 100px;
    }
}

@supports not (translate: 0) {
    /* Individual transform properties are NOT supported */
    div {
        transform: translate(100px, 100px);
    }
}