AtoZ CSS快速提示：使用Y轴变换和矩阵

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast on rotateY here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看完整的成绩单和上rotateY截屏视频。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added a quick tip on Y-Axis transforming and matrices.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时屏幕广播还不够，因此在本文中，我们添加了有关Y轴转换和矩阵的快速提示。

Y用于Y轴变换和矩阵 (Y is for Y-Axis transforming and matrices)

We can perform all sorts of interesting transformations on elements along various different axis. In this tip, we’ll provide a rundown of all the common options and then look at a lesser known value of transform which allows us to set multiple transform values via the matrix() value.

我们可以沿各种不同的轴对元素执行各种有趣的转换。 在本技巧中，我们将提供所有常用选项的摘要，然后查看一个鲜为人知的transform值，该值允许我们通过matrix()值设置多个transform值。

沿y轴transform (transform along the y-axis)

Since the original screencast focused around rotateY(), I thought it would be useful to look at all other available transformations that happen along the vertical y-axis.

由于最初的截屏视频集中在rotateY() ，所以我认为查看沿垂直y轴发生的所有其他可用转换会很有用。

We can apply the following transformations:

我们可以应用以下转换：

• transform: translateY(100px)

  transform: translateY(100px)

• transform: rotateY(45deg)

  transform: rotateY(45deg)

• transform: scaleY(1.5)

  transform: scaleY(1.5)

• transform: skewY(30deg)

  transform: skewY(30deg)

These values are all limited to the y-axis and can be used to communicate intent that the only transformation along this single axis is being performed.

这些值都限于y轴，可用于传达意图是要执行沿此单轴的唯一转换。

rotateY() is the only one of these values that performs a 3D transformation, where the element is rotated around the y-axis. If performing any kind of 3D transform, be sure to set transform-style:preserve-3d on the parent element.

rotateY()是这些值中唯一执行3D转换的值，其中元素绕y轴旋转。 如果执行任何类型的3D transform ，请确保在父元素上设置transform-style:preserve-3d 。

多重transform (Multiple transform)

If you want to combine multiple transform values together, this can be done by space separating the different transformation functions. The following snippet combines a translation with a skew for example:

如果要将多个transform值组合在一起，可以通过将不同的变换函数分隔开来完成。 例如，以下代码段将转换与skew结合起来：

.element {
  transform: translateY(50px) skew(30deg);
}

This is all well and good but if you are setting multiple transform like this as part of an animation or transition, it can be quite fiddly as every part of the transform needs to be addressed in each state or keyframe.

这一切都很好，但是如果您将这样的多个transform设置为动画或过渡的一部分，则可能很麻烦，因为需要在每个状态或关键帧中解决transform每个部分。

There is a slightly more complex but much more powerful method for setting transform via the matrix() value.

通过matrix()值设置transform方法稍微复杂一些，但功能强大得多。

使用matrix()设置复杂transform (Set complex transform with a matrix())

The matrix() is a single value that allows you to set scale, skew and translate in one go by passing 6 numeric parameters.

matrix()是一个单一值，允许您通过传递6个数字参数来一次设置scale ， skew并translate 。

.element {
  transform: matrix(a, b, c, d, e, f);
}

At the heart of this technique is some pretty complex maths which has always hurt my brain to try and figure out. So instead of me trying to explain mathematical matrices, dot products, and vectors, let’s have a look at what each of the parameters in the matrix() refer to.

这项技术的核心是一些非常复杂的数学，这些数学一直困扰着我的大脑去尝试找出答案。 因此，与其让我尝试解释数学矩阵，点积和向量，不如让我们看一下matrix()每个参数的含义。

If you do want a full on deep dive into the maths, have a read of this article by User Agent Man.

如果您想深入学习数学，请阅读User Agent Man的这篇文章。

In the above snippet, I’ve labeled each argument to the matrix function with a different letter from a to f.

在以上代码段中，我为矩阵函数的每个自变量标记了从a到f的不同字母。

a and d are used to set the horizontal and vertical scale.

a和d用于设置水平和垂直比例。

b and c are used to set the amount of horizontal and vertical skew.

b和c用于设置水平和垂直偏斜量。

Finally, e and f are for setting the horizontal and vertical translation.

最后， e和f用于设置水平和垂直平移。

One thing that makes this whole matrix() thing a bit hard to grasp is that each argument is provided as a number value rather than a length. Lengths are values like 100px or 30deg but these aren’t valid values for a matrix and we need to use numbers instead.

使整个matrix()事情有点难以理解的一件事是，每个参数都以数字值而不是长度提供。 长度是100px或30deg值，但是对于矩阵来说这些值不是有效值，我们需要使用数字代替。

To demonstrate this, the snippet below produces two identical visual results; one using multiple transform and on with a single matrix:

为了证明这一点，下面的代码片段产生了两个相同的视觉效果； 一个使用多个transform ，然后使用单个矩阵：

.one {
  transform: scale(1.5, 1.5) skew(10deg, 10deg) translate(100px, -50px);
}
.two {
  transform: matrix(1.5, 0.26449, 0.26449, 1.5, 136.775, -48.551);
}

Here’s a Codepen of the above snippet so you can see the identical result:

这是上述代码段的Codepen，因此您可以看到相同的结果：

See the Pen qqEjMz by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint( @SitePoint )的Pen qqEjMz 。

As much as the matrix() value is useful for setting many values in one go, it’s not particularly human readable. It’s great if you’re doing a lot of JavaScript maths to work out all the various component parts of the matrix but it’s very confusing to write by hand.

尽管matrix()值可用于一次性设置许多值，但它并不是人类可读的。 如果您要进行大量JavaScript数学运算来计算出矩阵的所有各个组成部分，那就太好了，但是用手编写非常令人困惑。

If you want to dig into matrices further then you can “Inspect Element” on any element that’s been transformed and look at the “computed styles” tab. The matrix for the transform being applied will be shown in full.

如果您想进一步研究矩阵，则可以在已转换的任何元素上“检查元素”，然后查看“计算样式”选项卡。 将完整显示要应用的transform矩阵。

翻译自: https://www.sitepoint.com/atoz-css-y-axis/