CSS 单个变换属性持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情在

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

在这个简短教程中，我想介绍一个事实，即最近 CSS 对 CSS 转换进行了一些更改。以前，语法有点混乱。如果我们想沿 X 轴平移并旋转它，我们必须这样做：

div {
    transform: rotateX(45deg) translateX(40px);
}

这很好，但它导致了动画中的各种问题。例如，考虑以下 CSS：

div {
    transform: rotateX(45deg) translateX(40px);
}
div:hover {
    transform: rotateX(75deg);
}

事实上，这并不只是在 X 轴上旋转75deg. 它也重置translateX为0px。这可能很好，但解决方法是您必须重新声明它translateX仍然是40px：

div {
    transform: rotateX(45deg) translateX(40px);
}
div:hover {
    transform: rotateX(75deg) translateX(40px);
}

为了解决这个问题和其他问题，CSS 引入了专用的转换属性，现在可以享受广泛的浏览器支持，前提是您不需要支持 Internet Explorer 或某些移动浏览器。

主要浏览器对 mdn-css__properties__rotate 功能的支持数据

单个 CSS 转换属性

现在可以在 CSS 中使用的属性是：

这些中的每一个都接受不同的值。

对于比例，当为其提供一个值时，scale它同时代表scaleX和scaleY。而 2 值是指为scaleX和设置不同的值scaleY，第三个值表示scaleZ。例如：

div {
    scale: 2; 
    scale: 2 1.5; 
    scale: 2 1.5 3; 
}

对于 rotate，单个值表示绕z轴旋转。如果我们想在另一个方向旋转，我们只需添加我们想要旋转的字母。如果我们想在多个方向上旋转，我们传入一个方向向量 like1 1 1和我们想要使用的角度，具有相同的功能rotate3d。

div {
    rotate: 45deg; 
    rotate: 1 1 2 45deg; 
    rotate: x 45deg; 
}

对于 translate，单个值将代表一个x翻译，两个将代表一个x和y翻译，第三个值代表一个z翻译。

div {
    translate: 5px; 
    translate: 5px 10px; 
    translate: 5px 10px 15px; 
}

这些新属性减少了一些最常用的变换属性之前处理变换的混乱方式。像这样的复杂转换：

div {
    transform: scale(2) translateX(45px) translateY(20px) rotate(45deg);
}

可以简化为：

div {
    scale: 2;
    rotate: 45deg;
    translate: 45px 20px;
}

这些单独的 CSS 属性简化了曾经令人困惑的长线 CSS 转换。它们不会替换transform属性，因为它支持类似的函数skew，这些函数没有单独的属性。然而，它们确实在使 CSS 更具可读性方面大有帮助。