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

huma13453

本文是我们 AtoZ CSS 系列的一部分。您可以在此处找到该系列的其他条目。 您可以在rotateY 此处查看完整的文字记录和截屏视频。 欢迎来到我们的 AtoZ CSS 系列！在本系列中，我将探索不同的 CSS 值（和属性），每个值都以不同的字母开头。我们知道有时截屏视频是不够的，因此在本文中，我们添加了有关 Y 轴转换和矩阵的快速提示。 y3-01 Y 用于 Y 轴变换和矩阵 我们可以沿着各种不同的轴对元素执行各种有趣的转换。在本技巧中，我们将提供所有常见选项的概要，然后查看一个鲜为人知的值，它允许我们通过该值transform设置多个值。由于原始截屏视频主要关注rotateY()，我认为查看沿垂直 y 轴发生的所有其他可用转换会很有用。 我们可以应用以下转换：这些值都仅限于 y 轴，可用于传达正在执行沿该单个轴的唯一转换的意图。

rotateY()是这些值中唯一执行 3D 变换的值，其中元素绕 y 轴旋转。如果执行任何类型的 3D ，请务必在父元素上transform设置。一切都很好，但如果您将transform这样的多个设置作为动画或过渡的一部分，则可能会非常繁琐，因为需要transform在每个状态或关键帧中解决每个部分。 有一种稍微 垃圾邮件号码数据 复杂但更强大的方法可以transform通过matrix()值进行设置。 Learn to Code with JavaScript 设置复数transform为matrix() 是一个单一值，允许您通过传递 6 个数字参数一次性matrix()设置scale,skew和。这项技术的核心是一些相当复杂的数学，试图弄清楚这些数学总是会伤害我的大脑。因此，我不想尝试解释数学矩阵、点积和向量，而是让我们看看其中的每个参数所指的含义matrix()。 如果您确实想全面深入地了解数学，请阅读User Agent Man撰写的这篇文章。




在上面的代码片段中，我用不同的字母 to 标记了矩阵函数的每个a参数f。 a和d用于设置水平和垂直比例。 b和c用于设置水平和垂直倾斜量。 最后，e和f用于设置水平和垂直平移。 使整个matrix()事情有点难以理解的一件事是每个参数都是作为数值而不是长度提供的。长度是类似100px或 的值30deg，但这些对于矩阵来说不是有效值，我们需要使用数字来代替。 Learn to Code with JavaScript 为了证明这一点，下面的代码片段产生了两个相同的视觉结果；一个使用多个矩阵transform，另一个使用单个矩阵因此您可以看到相同的结果： 尽管该matrix()值对于一次性设置多个值非常有用，但它并不是特别适合人类阅读。如果您需要进行大量 JavaScript 数学运算来计算出矩阵的所有各个组成部分，那么这很好，但是手动编写会非常混乱。