CSS 单个变换属性

Posted on by

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. 它也重置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
  • translate
  • rotate

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

对于比例，当为其提供一个值时，scale它同时代表scaleX和scaleY。而 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翻译，两个将代表一个x和y翻译，第三个值代表一个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 更具可读性方面大有帮助。

推荐阅读：