CSS 单个变换属性

CSS 变换是在 CSS 中平移、旋转和创建 3d 对象的有用方法。我之前在这里介绍了 CSS 变换是如何工作的,我还创建了一个3d Minecraft 鸡来展示如何使用它们来制作 3D 动画对象。

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

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

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

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

事实上,这并不只是在 X 轴上旋转75deg. 它也重置translateX0px。这可能很好,但解决方法是您必须重新声明它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
  • translate
  • rotate

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

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

div {
    scale: 2; /* scales x and y by factor of 2 */
    scale: 2 1.5; /* scales x by factor of 2, and y by factor of 1.5 */
    scale: 2 1.5 3; /* scales x by factor of 2, y by factor of 1.5, and z by a factor of 3 */
}

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

div {
    rotate: 45deg; /* Rotate 45deg along z axis */
    rotate: 1 1 2 45deg; /* Rotate 45deg across a directional vector of [1, 1, 2] */
    rotate: x 45deg; /* rotate individually along x axis by 45deg. */
}

对于 translate,单个值将代表一个x翻译,两个将代表一个xy翻译,第三个值代表一个z翻译。

div {
    translate: 5px; /* Translate x by 5px */
    translate: 5px 10px; /* Translate x by 5px, and y by 10px */
    translate: 5px 10px 15px; /* Translate x by 5px, y by 10px, and z by 15px */
}

单个 CSS 转换属性的好处#

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

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

可以简化为:

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

结论#

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