CSS 变换允许您对 HTML 元素进行平移、旋转、倾斜、缩放或添加透视效果。

本教程讨论了像专家一样转换 HTML 元素所需了解的一切。

目录

1. 什么是 CSStransform属性？
2. 什么是 CSSrotate()函数？
3. 什么是 CSSrotateX()函数？
4. 什么是 CSSrotateY()函数？
5. 什么是 CSSrotateZ()函数？
6. 什么是 CSSrotate3d()函数？
7. CSS 旋转函数与rotate属性：有什么区别？
8. 什么是 CSSscale()函数？
9. CSSscale()函数与scale属性：有什么区别？
10. 什么是 CSSscaleZ()函数？
11. 什么是 CSSscale3d()函数？
12. 什么是 CSSskew()函数？
13. 什么是 CSStranslate()函数？
14. 什么是 CSStranslateZ()函数？
15. 什么是 CSStranslate3d()函数？
16. CSS Translate 函数与translate属性：有什么区别？
17. 什么是 CSSperspective()函数？
18. CSSperspective()函数与perspective属性：有什么区别？
19. 什么是 CSSmatrix()函数？
20. 为什么 CSS 转换函数的顺序很重要？
21. 将变换函数转换为的工具matrix()
22. 关于在 CSS 中转换元素的重要知识
23. 包起来

因此，事不宜迟，让我们讨论 CSStransform属性。

（更|多优质内|容：java567 点 c0m）

什么是 CSStransform属性？

CSStransform属性指定您希望应用于 HTML 元素的转换效果。

语法如下：

 html-element {   transform: value; }

CSStransform属性接受以下值：

• inherit：使用其父元素的值转换元素transform。
• initial：使用默认值转换 HTML 元素transform。
• matrix()：用六个值的矩阵对元素进行二维变换。
• matrix3d()：用 16 个值的 4x4 矩阵对 HTML 元素进行三维变换。
• none：不对HTML 元素应用任何转换。
• perspective()：使用透视图变换 3D 变换元素。
• rotate()：通过二维旋转来变换元素。
• rotate3d()：通过三维旋转来变换元素。
• rotateX()：通过沿 X 轴三维旋转来变换元素。
• rotateY()：通过沿 Y 轴三维旋转来变换元素。
• rotateZ()：通过沿 Z 轴三维旋转来变换 HTML 元素。
• scale()：通过二维缩放元素来变换元素。
• scale3d()：通过三维缩放来变换元素。
• scaleX()：通过沿 X 轴缩放元素来变换元素。
• scaleY()：通过沿 Y 轴缩放元素来变换元素。
• scaleZ()：通过沿 Z 轴进行三维缩放来转换 HTML 元素。
• skew()：通过沿 X 轴和 Y 轴二维倾斜元素来变换元素。
• skewX()：通过沿 X 轴二维倾斜元素来变换元素。
• skewY()：通过沿 Y 轴二维倾斜元素来变换元素。
• translate()：通过二维平移（移动）它来转换 HTML 元素。
• translate3d()：通过三维平移来变换元素。
• translateX()：通过沿 X 轴平移元素来变换元素。
• translateY()：通过沿 Y 轴平移元素来变换元素。
• translateZ()：通过沿 Z 轴在三维空间中平移元素来变换元素。

注意：该transform属性接受一个或多个CSS 转换函数。例如，这是一个有效的transform声明：

 div {   transform: perspective(370px) scaleZ(5) rotate(17deg); }

在上面的代码片段中，我们为transform属性分配了三个转换函数。让我们多谈谈一些transform价值观。

什么是 CSSrotate()函数？

rotate()通过围绕固定点二维旋转元素来变换元素。

笔记：

• “变换原点”是元素围绕其旋转的固定点。
• 您可以使用 CSS 属性定义元素的固定点transform-origin。但默认是center。

CSSrotate()函数的语法

rotate()接受一个参数。这是语法：

 element {   transform: rotate(angle); }

请注意以下事项：

• 该rotate(angle)函数等同于rotate3d(0, 0, 1, angle)或rotateZ(angle)。
• 参数angle指定元素的旋转角度。
• angle可以是degrees、gradians、radians或turns。
• 参数由一个angle数字和您希望使用的单位组成——例如，45deg.
• 您浏览器的书写方向决定了元素的旋转方向。
• 正角度将沿从左到右的书写方向顺时针旋转元素。但是负角度会逆时针旋转。
• 正角度将在从右到左的书写上下文中逆时针旋转元素。但是负角度会顺时针旋转。

CSSrotate()函数的例子

以下是 CSSrotate()功能如何工作的一些示例。

如何在 CSS 中进行零度旋转：

 img {   transform: rotate(0deg);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate()函数为图像元素指定零度 (0⁰) 旋转。

如何在 CSS 中进行 45 度旋转：

 img {   transform: rotate(45deg);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate()函数为图像元素指定四十五度 (45⁰) 旋转。

如何在 CSS 中进行负七十度旋转：

 img {   transform: rotate(-70deg);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate()函数为图像元素指定负七十度 (70⁰) 旋转。

什么是 CSSrotateX()函数？

rotateX()通过绕 X 轴三维旋转来变换元素。

显示 X、Y 和 Z 轴的三维笛卡尔坐标系

CSSrotateX()函数的语法

rotateX()接受一个参数。这是语法：

 element {   transform: rotateX(angle); }

请注意以下事项：

• 功能rotateX(angle)等同于rotate3d(1, 0, 0, angle).
• 参数angle指定元素的旋转角度。
• angle可以是度数、gradian、radian 或 turn。
• 参数由一个angle数字和您希望使用的单位组成——例如，45deg.

CSSrotateX()函数的例子

以下是 CSSrotateX()功能如何工作的一些示例。

如何绕 X 轴做零度旋转：

 img {   transform: rotateX(0deg);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotateX()函数指定图像绕 X 轴的零度 (0⁰) 旋转。

如何绕 X 轴旋转 70 度：

 img {   transform: rotateX(70deg);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotateX()函数指定图像绕 X 轴旋转七十度 (70⁰)。

什么是 CSSrotateY()函数？

rotateY()通过绕 Y 轴三维旋转来变换元素。

CSSrotateY()函数的语法

rotateY()接受一个参数。这是语法：

element {  transform: rotateY(angle);}

请注意以下事项：

• 功能rotateY(angle)等同于rotate3d(0, 1, 0, angle).
• 参数angle指定元素的旋转角度。
• angle可以是度数、弧度、弧度或转数。
• 参数由一个angle数字和您希望使用的单位组成——例如，45deg.

CSSrotateY()函数的例子

以下是 CSSrotateY()功能如何工作的一些示例。

如何绕 Y 轴做零度旋转：

img {  transform: rotateY(0deg);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotateY()函数指定图像绕 Y 轴的零度 (0⁰) 旋转。

如何绕 Y 轴旋转 70 度：

img {  transform: rotateY(70deg);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotateY()函数指定图像绕 Y 轴旋转七十度 (70⁰)。

什么是 CSSrotateZ()函数？

rotateZ()通过绕 Z 轴三维旋转来变换元素。

CSSrotateZ()函数的语法

rotateZ()接受一个参数。这是语法：

element {  transform: rotateZ(angle);}

请注意以下事项：

• 该rotateZ(angle)函数等同于rotate3d(0, 0, 1, angle)或rotate(angle)。
• 参数angle指定元素的旋转角度。
• angle可以是度数、弧度、弧度或转数。
• 参数由一个angle数字和您希望使用的单位组成——例如，45deg.

CSSrotateZ()函数的例子

以下是 CSSrotateZ()功能如何工作的一些示例。

如何绕 Z 轴做零度旋转：

img {  transform: rotateZ(0deg);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotateZ()函数指定图像绕 Z 轴的零度 (0⁰) 旋转。

如何绕 Z 轴旋转 70 度：

img {  transform: rotateZ(70deg);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotateZ()函数指定图像绕 Z 轴旋转七十度 (70⁰)。

什么是 CSSrotate3d()函数？

rotate3d()通过绕 x、y 和 z 轴三维旋转来变换元素。

CSSrotate3d()函数的语法

rotate3d()接受四个参数。这是语法：

element {  transform: rotate3d(x, y, z, angle);}

请注意以下事项：

• 、和参数是指定 x、y 和 z 坐标的数字x。y``z
• 坐标是元素将围绕其旋转的轴。
• 参数angle指定元素的旋转角度。
• angle可以是度数、弧度、弧度或转数。
• 参数由一个angle数字和您希望使用的单位组成——例如，45deg.

CSSrotate3d()函数的例子

以下是 CSSrotate3d()功能如何工作的一些示例。

如何绕 Z 轴旋转 70 度：

img {  transform: rotate3d(0, 0, 1, 70deg);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotate3d()函数指定图像绕 Z 轴旋转七十度 (70⁰)。

如何绕 X、Y 和 Z 轴旋转 70 度：

 img {   transform: rotate3d(1, 1, 1, 70deg);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate3d()函数指定图像绕 x、y 和 z 轴旋转七十度 (70⁰)。

CSS 旋转函数与rotate属性：有什么区别？

CSS 旋转函数和 CSSrotate属性提供了两种类似的方式来指定旋转变换。

两种旋转技术的主要区别如下：

• CSSrotate属性允许在不使用 CSS 属性的情况下旋转元素transform。
• CSSrotate属性的语法比它的替代函数更短。
• CSS属性使您不必记住定位转换函数的rotate特定顺序。
• 浏览器按照您将它们分配给 CSStransform属性的顺序计算转换函数的矩阵——从左到右。
• 浏览器按照以下转换矩阵顺序
• 计算转换属性矩阵：
• translate
• rotate
• scale

下面是一些例子。

如何使用 CSSrotate属性与函数进行 45 度旋转

 img {   rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate属性为图像元素指定四十五度 (45⁰) 旋转。

如何使用 CSSrotate属性与函数绕 X 轴旋转 70 度

 img {   rotate: x 70deg; /* Equal to a transform: rotateX(70deg) property */   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate属性指定图像绕 X 轴旋转七十度 (70⁰)。

如何使用 CSSrotate属性与函数绕 Y 轴旋转 70 度

 img {   rotate: y 70deg; /* Equal to a transform: rotateY(70deg) property */   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该rotate属性指定图像绕 Y 轴旋转七十度 (70⁰)。

如何使用 CSSrotate属性与函数绕 Z 轴旋转 70 度

img {  rotate: z 70deg; /* Equal to a transform: rotateZ(70deg) property */  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotate属性指定图像绕 Z 轴旋转七十度 (70⁰)。

如何使用 CSSrotate属性与函数绕 X、Y 和 Z 轴旋转 70 度

img {  rotate: 1 1 1 70deg; /* Equal to a transform: rotate3d(1, 1, 1, 70deg) property */  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该rotate属性指定图像绕 x、y 和 z 轴旋转七十度 (70⁰)。

注意：一个none值告诉浏览器不要旋转所选元素。

什么是 CSSscale()函数？

scale()通过从固定点二维调整（缩放）元素来变换元素。

笔记：

• “变换原点”是计算机缩放元素的固定点。
• 您可以使用 CSS 属性定义元素的固定点transform-origin。但默认是center。

CSSscale()函数的语法

scale()接受两个参数。这是语法：

element {  transform: scale(x, y);}

请注意以下事项：

• 参数x可以是数字或百分比。它指定元素沿 x 轴的比例因子。
• 参数y也可以是数字或百分比。它定义元素沿 y 轴的比例因子。
• Y 轴的默认值为x. 因此，如果您不提供y参数，浏览器会自动使用x的值。
• 假设x和y是相等的。在这种情况下，浏览器将统一缩放您的元素并保持其纵横比。

显示 X 轴和 Y 轴的二维笛卡尔坐标系

CSSscale()函数的例子

以下是 CSSscale()功能如何工作的一些示例。

如何在 CSS 中沿 X 轴和 Y 轴均匀缩放元素：

 img {   transform: scale(0.3);   transform-origin: left; }

在 StackBlitz 上试用

上面的代码片段使用该scale()函数指定0.3图像元素沿 X 轴和 Y 轴的比例因子。

笔记：

• scale(0.3)相当于scale(0.3, 0.3).
• 的百分比当量scale(0.3)是scale(30%)。

如何在 CSS 中沿 X 轴和 Y 轴非均匀地缩放元素：

 img {   transform: scale(0.3, 65%);   transform-origin: top left; }

在 StackBlitz 上试用

上面的代码片段使用该scale()函数指定0.3图像沿 X 轴和65%Y 轴的比例因子。

如何仅沿 X 轴缩放元素：

img {  transform: scale(0.3, 1);  transform-origin: top left;}

在 StackBlitz 上试用

上面的代码片段使用该scale()函数指定0.3图像仅沿 X 轴的比例因子。

笔记：

• 比例因子1or100%告诉浏览器不要对所选元素应用任何缩放效果。
• scale(0.3, 1)相当于scaleX(0.3).

如何仅沿 Y 轴缩放元素：

img {  transform: scale(100%, 0.2);  transform-origin: top left;}

在 StackBlitz 上试用

上面的代码片段使用该scale()函数指定0.2图像仅沿 Y 轴的比例因子。

笔记：

• 或比例因子告诉浏览器不要100%对所选元素应用任何缩放效果。1
• scale(100%, 0.2)相当于scaleY(0.2).

CSSscale()函数与scale属性：有什么区别？

CSSscale()函数和 CSSscale属性提供了两种类似的方式来指定比例变换。

两种缩放技术之间的主要区别如下：

• CSSscale属性允许在不使用 CSS 属性的情况下缩放元素transform。
• CSSscale属性的语法比它的替代函数更短。
• CSSscale属性使您不必记住定位转换函数的特定顺序。
• 浏览器按照您将它们分配给 CSStransform属性的顺序计算转换函数的矩阵——从左到右。
• 浏览器按以下顺序计算转换属性矩阵：
• translate
• rotate
• scale

这是一个例子：

使用 CSSscale属性沿 X 轴和 Y 轴非均匀地缩放元素。

 img {   scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */   transform-origin: top left; }

在 StackBlitz 上试用

上面的代码片段使用该scale属性指定0.3图像沿 X 轴和65%Y 轴的比例因子。

注意：一个none值告诉浏览器不要缩放所选元素。

什么是 CSSscaleZ()函数？

scaleZ()通过从沿 z 轴的固定点在三维空间中调整（缩放）元素来变换元素。

笔记：

• “变换原点”是计算机缩放元素的固定点。
• 您可以使用 CSS 属性定义元素的固定点transform-origin。但默认是center。

CSSscaleZ()函数的语法

scaleZ()接受一个参数。这是语法：

 element {   transform: scaleZ(number); }

笔记：

• 功能scaleZ(number)等同于scale3d(1, 1, number).
• 该number参数指定元素沿 z 轴的比例因子。

CSSscaleZ()函数的例子

我们经常scaleZ()与其他 CSS 函数一起使用，例如perspective()、translateZ()和rotateX()。下面是一些例子。

如何scaleZ()与 CSSperspective()和rotateX()函数一起使用：

 img {   transform: perspective(370px) scaleZ(5) rotateX(17deg);   width: 80%; }

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用perspective()函数来定义370px用户和z=0 平面之间的距离。
2. 该函数指定图像沿 z 轴scaleZ()的比例因子。5
3. 我们使用该rotateX()函数将图像绕 x 轴旋转十七度 (17⁰)。

笔记：

• perspective()当您将它与其他CSS 转换函数链接在一起时，首先列出。否则，浏览器可能会错误地转换所选元素。
• 列出scaleZ()之前的功能rotateX()。否则，浏览器将不会缩放元素。

如何scaleZ()与 CSSperspective()和translateZ()函数一起使用：

img {  width: 40%;}.second-image {  transform: perspective(370px) scaleZ(5) translateZ(30px);}

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective()函数来定义370px用户与 z=0 平面之间的距离。
2. 该函数指定图像沿 z 轴scaleZ()的比例因子。5
3. 我们使用该translateZ()函数将second-image三十个像素 ( 30px) 沿 z 轴从其原始位置重新定位。

什么是 CSSscale3d()函数？

scale3d()通过从沿 x、y 和 z 轴的固定点在三维空间中调整（缩放）元素的大小来变换元素。

笔记：

• “变换原点”是计算机缩放元素的固定点。
• 您可以使用 CSS 属性定义元素的固定点transform-origin。但默认是center。

CSSscale3d()函数的语法

scale3d()接受三个参数。这是语法：

 element {   transform: scale3d(x, y, z); }

、和参数是指定 x、y 和 z 坐标的数字x。坐标是浏览器缩放元素的轴。y``z

CSSscale3d()函数的例子

以下是 CSSscale3d()功能如何工作的一些示例。

如何scale3d()与 CSSperspective()和rotateX()函数一起使用：

 img {   transform: perspective(370px) scale3d(1, 1, 5) rotateX(17deg);   width: 80%; }

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective()函数来定义370px用户与 z=0 平面之间的距离。
2. 该函数指定图像沿 x、y 和 z 轴scale3d()的比例因子1、1和。5
3. 我们使用该rotateX()函数将图像绕 x 轴旋转十七度 (17⁰)。

笔记：

• 比例因子1将不会对元素应用缩放效果。
• perspective()当你将它与其他 CSS 转换函数链接在一起时，首先列出。否则，浏览器可能会错误地转换所选元素。
• 列出scale3d()之前的功能rotateX()。否则，浏览器将不会缩放元素。

如何三维缩放元素：

img {  width: 40%;}.second-image {  transform: scale3d(5, 3, 0.05);  transform-origin: top left;}

在 StackBlitz 上试用

我们使用该函数指定图像沿 x、y 和 z 轴的scale3d()比例因子5、3和。0.05

什么是 CSSskew()函数？

skew()通过围绕固定点二维倾斜（倾斜）元素来变换元素。

笔记：

• “变换原点”是计算机倾斜元素的固定点。
• 您可以使用 CSS 属性定义元素的固定点transform-origin。但默认是center。

CSSskew()函数的语法

skew()接受两个参数。这是语法：

 element {   transform: skew(aX, aY); }

请注意以下事项：

• 该aX参数指定元素沿 x 轴的倾斜角度。
• 参数aY指定元素沿 y 轴的倾斜角度。
• aX可以aY是度数、梯度、弧度或转数。
• 参数由一个angle数字和您希望使用的单位组成——例如，45deg.
• aY是可选参数。

CSSskew()函数的例子

以下是 CSSskew()功能如何工作的一些示例。

如何仅沿 X 轴倾斜元素：

 img {   transform: skew(30deg);   transform-origin: top;   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该skew()函数仅沿 x 轴在图像上应用三十度 (30⁰) 倾斜。

注： skew(30deg)等同于skewX(30deg).

如何仅沿 Y 轴倾斜元素：

img {  transform: skew(0, 40deg);  transform-origin: top left;  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该skew()函数仅沿 y 轴在图像上应用四十度 (40⁰) 倾斜。

笔记：

• 零 ( 0) 倾斜度告诉浏览器不要对所选元素应用任何倾斜效果。
• skew(0, 40deg)相当于skewY(40deg).

如何沿 X 轴和 Y 轴倾斜元素：

img {  transform: skew(30deg, 40deg);  transform-origin: top left;  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该skew()函数沿 x 轴在图像上应用三十度 (30⁰) 倾斜。沿 y 轴四十度 (40⁰)。

什么是 CSStranslate()函数？

translate()通过二维重新定位（平移）元素来转换元素。

CSStranslate()函数的语法

translate()接受两个参数。这是语法：

element {  transform: translate(x, y);}

请注意以下事项：

• 参数x可以是长度或百分比值。它指定您希望将元素从其原始 x 轴位置移动的距离。
• 参数y可以是长度或百分比值。它定义了您希望将元素从其原始 y 轴位置移动的距离。
• y是可选参数。

CSStranslate()函数的例子

以下是 CSStranslate()功能如何工作的一些示例。

如何仅沿 X 轴平移元素：

img {  transform: translate(150px);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该translate()函数将图像150px沿 x 轴从其原始位置重新定位。

注： translate(150px)等同于translateX(150px).

如何仅沿 Y 轴平移元素：

img {  transform: translate(0, 55%);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该translate()函数将图像55%沿 y 轴从其原始位置重新定位。

笔记：

• 零 ( 0) 平移距离告诉浏览器不要对所选元素应用任何平移效果。
• translate(0, 55%)相当于translateY(55%).

如何沿 X 轴和 Y 轴平移元素：

img {  transform: translate(60%, 300px);  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该translate()函数将图像重新定位60%到远离其沿 x 轴和300pxy 轴的原始位置。

什么是 CSStranslateZ()函数？

translateZ()通过沿 z 轴在三维空间中重新定位（平移）元素来变换元素。

显示 X、Y 和 Z 轴的三维笛卡尔坐标系

CSStranslateZ()函数的语法

translateZ()接受一个参数。这是语法：

element {  transform: translateZ(length);}

该length参数指定您希望将元素从其原始 z 轴位置移动的距离。

三维笛卡尔坐标系，红色箭头定义绿色平面的 translateZ 长度

CSStranslateZ()函数的例子

我们经常使用translateZ()withperspective()函数。下面是一些例子。

如何translateZ()与 CSSperspective()函数一起使用：

img {  width: 40%;}.second-image {  transform: perspective(33px) translateZ(10px);}

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用perspective()函数来定义33px用户和z=0 平面之间的距离。
2. 我们使用该translateZ()函数将second-image十个像素 ( 10px) 沿 z 轴从其原始位置重新定位。

笔记：

• 假设second-image的 z 轴位置大于或等于perspective()函数的参数。在这种情况下，图像将消失，就好像它在用户身后一样。换句话说，当用户与元素处于相同位置时（或者当元素在用户后面时），所选项目会消失。
• 用户离元素的 z 轴位置的距离越大，透视效果就越不强烈，反之亦然。

如何使用透视translateZ()图70px：

 img {   width: 40%; }  .second-image {   transform: perspective(70px) translateZ(10px); }

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective()函数来定义70px用户与 z=0 平面之间的距离。
2. 我们使用该translateZ()函数将second-image十个像素 ( 10px) 沿 z 轴从其原始位置重新定位。

什么是 CSStranslate3d()函数？

translate3d()通过沿 x、y 和 z 轴在三维空间中重新定位（平移）元素来变换元素。

CSStranslate3d()函数的语法

translate3d()接受三个参数。这是语法：

 element {   transform: translate3d(x, y, z); }

请注意以下事项：

• 参数x可以是长度或百分比值。它指定您希望将元素从其原始 x 轴位置移动的距离。
• 参数y可以是长度或百分比值。它定义了您希望将元素从其原始 y 轴位置移动的距离。
• z只能是长度，不能是百分比。它定义了您希望将元素从其原始 z 轴位置移动的距离。

CSStranslate3d()函数的例子

以下是 CSStranslate3d()功能如何工作的一些示例。

如何仅沿 X 轴平移元素

 img {   transform: translate3d(150px, 0, 0);   width: 80%; }

在 StackBlitz 上试用

上面的代码片段使用该translate3d()函数将图像150px沿 x 轴从其原始位置重新定位。

注： translate3d(150px, 0, 0)等同于translateX(150px).

如何三维翻译元素：

 img {   width: 40%; }  .second-image {   transform: perspective(300px) translate3d(15%, 45%, 200px); }

在 StackBlitz 上试用

上面的代码片段使用该translate3d()函数将图像重新定位15%到远离其沿 x 轴、45%y 轴和200pxz 轴的原始位置。

CSS Translate 函数与translate属性：有什么区别？

CSS 翻译函数和 CSStranslate属性提供了两种类似的方式来指定翻译转换。

两种翻译技术的主要区别如下：

• CSStranslate属性允许在不使用 CSS 属性的情况下翻译元素transform。
• CSStranslate属性的语法比它的替代函数更短。
• CSStranslate属性使您不必记住定位转换函数的特定顺序。
• 浏览器按照您将它们分配给 CSStransform属性的顺序计算转换函数的矩阵——从左到右。
• 浏览器按以下顺序计算转换属性矩阵：
• translate
• rotate
• scale

下面是一些例子。

如何使用 CSStranslate属性与函数沿 X 轴和 Y 轴平移元素

img {  translate: 60% 300px; /* Equal to a transform: translate(60%, 300px) property */  width: 80%;}

在 StackBlitz 上试用

上面的代码片段使用该translate属性将图像60%沿 x 轴从其原始位置重新定位。从300px它的 y 轴。

注意：假设您希望沿 z 轴平移一个元素。在这种情况下，在perspective要翻译的元素的“父元素”上设置一个属性。否则，元素将不会沿其 z 轴移动。

如何使用 CSStranslate属性与函数沿 Z 轴平移元素

img {  width: 40%;}div {  perspective: 35px;}.second-image {  translate: 0px 0px 17px; /* Equal to a transform: translateZ(17px) property */}

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective属性来定义35px用户与 z=0 平面之间的距离。
2. 我们使用该属性将十七个像素 ( ) 沿 z 轴从其原始位置translate重新定位。second-image``17px

如何使用 CSStranslate属性与函数来三维转换元素

img {  width: 40%;}div {  perspective: 300px;}.second-image {  translate: 50% 25% 200px; /* Equal to a transform: translate3d(50%, 25%, 200px) property */}

在 StackBlitz 上试用

上面的代码片段使用该translate属性将图像50%沿 x 轴、25%y 轴和200pxz 轴从其原始位置重新定位。

注意：一个none值告诉浏览器不要翻译所选元素。

什么是 CSSperspective()函数？

perspective()通过向元素添加一些透视效果来变换元素。

CSSperspective()函数的语法

perspective()只接受一个参数。这是语法：

element {  transform: perspective(length);}

参数length指定用户到z=0 平面的距离。

三维笛卡尔坐标系，红色箭头定义用户与 z=0 平面之间的距离

CSSperspective()函数的例子

我们经常perspective()与其他 CSS 函数一起使用，例如translateZ()、rotateX()和rotateY()。下面是一些例子。

如何perspective()与 CSStranslateZ()函数一起使用：

img {  width: 40%;}.second-image {  transform: perspective(33px) translateZ(10px);}

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective()函数来定义33px用户与 z=0 平面之间的距离。
2. 我们使用该translateZ()函数将second-image十个像素 ( 10px) 沿 z 轴从其原始位置重新定位。

请注意以下事项：

• 假设second-image的 z 轴位置大于或等于perspective()函数的参数。在这种情况下，图像将消失，就好像它在用户身后一样。换句话说，当用户与元素处于相同位置时（或者当元素在用户后面时），所选项目会消失。
• 用户离元素的 z 轴位置的距离越大，透视效果就越不强烈，反之亦然。

如何perspective()与 CSSrotateY()函数一起使用：

img {  width: 40%;}.second-image {  transform: perspective(33px) rotateY(-10deg);}

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective()函数来定义33px用户与 z=0 平面之间的距离。
2. 我们使用该函数绕 y 轴rotateY()旋转负十度 (-10⁰)。second-image

如何perspective()与 CSSrotateX()函数一起使用：

 img {   width: 40%; }  .second-image {   transform: perspective(33px) rotateX(17deg); }

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective()函数来定义33px用户与 z=0 平面之间的距离。
2. 我们使用该函数绕 x 轴rotateX()旋转十七度 (17⁰)。second-image

CSSperspective()函数与perspective属性：有什么区别？

CSSperspective()函数和perspective属性提供了两种类似的方式来为 HTML 元素添加透视效果。

两种透视技术的主要区别如下：

• 我们perspective()“直接在元素上”应用我们想要添加一些透视效果的功能。
• 我们将perspective属性应用到我们想要添加一些透视效果的元素的“父元素”。
• 该perspective()函数用作transform属性的值。
• CSSperspective属性允许您在不使用 CSS 属性的情况下创建透视效果transform。

这是一个例子：

使用 CSSperspective属性给子元素添加透视效果：

img {  width: 40%;}div {  perspective: 33px;}.second-image {  rotate: x 17deg;}

在 StackBlitz 上试用

这是我们在上面的代码片段中所做的：

1. 我们使用该perspective属性来定义33px用户与 z=0 平面之间的距离。
2. 我们使用该属性绕 x 轴rotate旋转十七度 (17⁰)。second-image

笔记：

• CSSperspective属性使您不必记住定位转换函数的特定顺序。
• 一个none值告诉浏览器不要向所选元素的子元素添加任何透视效果。

什么是 CSSmatrix()函数？

CSSmatrix()函数是以下 2D 变换函数的简写：

• scaleX()
• skewY()
• skewX()
• scaleY()
• translateX()
• translateY()

换句话说，而不是写：

 img {   transform-origin: 0 0;   transform: translateX(100px) translateY(250px) scaleX(2) scaleY(0.9)     skewX(10deg) skewY(35deg);   width: 80%; }

在 StackBlitz 上试用

您也可以使用该matrix()函数来缩短代码，如下所示：

 img {   transform-origin: 0 0;   transform: matrix(2.24693, 0.630187, 0.352654, 0.9, 100, 250);   width: 80%; }

在 StackBlitz 上试用

CSSmatrix()函数的语法

该matrix()函数接受六个值。语法如下：

 matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

您可以将 CSS 矩阵的值表示为ℝℙ 2上的齐次坐标，如下所示：

 | scX skX tX | ← x-axis | skY scY tY | ← y-axis |  0   0   1 | ← constants

请注意以下事项：

• scX和skX是描述元素在 x 轴上的缩放和倾斜线性变换的数字。
• tX是一个数字，表示元素在 x 轴上的平移。
• skY和scY是描述元素在 y 轴上的倾斜和缩放线性变换的数字。
• tY是一个数字，表示元素在 y 轴上的平移。
• 0, 0,1是常数。
• 我们不将常量作为参数传递给matrix()函数，因为计算机会自动暗示它们。

CSSmatrix()函数的例子

以下是 CSSmatrix()函数的一些示例。

如何转换scaleX()为matrix()函数：

考虑以下transform属性：

 img {   transform-origin: 0 0;   transform: scaleX(2);   width: 80%; }

在 StackBlitz 上试用

这是matrix()上面scaleX()函数的等价物：

 img {   transform-origin: 0 0;   transform: matrix(2, 0, 0, 1, 0, 0); /* scX, skY, skX, scY, tX, tY */   width: 80%; }

在 StackBlitz 上试用

让我们也将矩阵的值表示为 ℝℙ 2上的齐次坐标：

 | 2 0 0 | ← x-axis | 0 1 0 | ← y-axis | 0 0 1 | ← constants

下面是另一个例子。

如何转换translateY()为matrix()函数：

 img {   transform-origin: 0 0;   transform: translateY(250px);   width: 80%; }

在 StackBlitz 上试用

这是matrix()上面translateY()函数的等价物：

 img {   transform-origin: 0 0;   transform: matrix(1, 0, 0, 1, 0, 250); /* scX, skY, skX, scY, tX, tY */   width: 80%; }

在 StackBlitz 上试用

让我们也将矩阵的值表示为 ℝℙ 2上的齐次坐标：

 | 1 0 0   | ← x-axis | 0 1 250 | ← y-axis | 0 0 1   | ← constants

下面是第三个例子。

如何转换translateX()和scale()运行matrix()：

 img {   transform-origin: 0 0;   transform: translateX(100px) scale(2);   width: 80%; }

在 StackBlitz 上试用

transform以下是将上述属性的值转换为的语法matrix()：

 matrix = (translateX's homogeneous coordinates) x (scale's homogeneous coordinates)

让我们通过定义 的齐次坐标开始转换translateX(100px)：

 | 1 0 100 | ← x-axis | 0 1 0   | ← y-axis | 0 0 1   | ← constants

我们还定义 的scale(2)齐次坐标：

 | 2 0 0 | ← x-axis | 0 2 0 | ← y-axis | 0 0 1 | ← constants

现在是时候使用以下语法将两个齐次坐标相乘了：

 | a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr | | b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr | | c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

让我们像这样实现上面的语法：

 | 1 0 100 |   | 2 0 0 |   | 2 + 0 + 0   0 + 0 + 0   0 + 0 + 100 | | 0 1  0  | x | 0 2 0 | = | 0 + 0 + 0   0 + 2 + 0   0 + 0 +  0  | | 0 0  1  |   | 0 0 1 |   | 0 + 0 + 0   0 + 0 + 0   0 + 0 +  1  |

下一步是解决加法。那么，让我们现在开始吧。

 | 1 0 100 |   | 2 0 0 |   | 2 0 100 | | 0 1  0  | x | 0 2 0 | = | 0 2  0  | | 0 0  1  |   | 0 0 1 |   | 0 0  1  |

上面的加法结果为我们提供了属性的齐次坐标transform: translateX(100px) scale(2)。

换句话说，(translateX's homogeneous coordinates)和(scale's homogeneous coordinates)等于的乘积：

 | 2 0 100 | ← x-axis | 0 2  0  | ← y-axis | 0 0  1  | ← constants

因此， 的矩阵等价transform: translateX(100px) scale(2)为transform: matrix(2, 0, 0, 2, 100, 0)。

 img {   transform-origin: 0 0;   transform: matrix(2, 0, 0, 2, 100, 0);   width: 80%; }

在 StackBlitz 上试用

请注意transform: translateX(100px) scale(2)并transform: scale(2) translateX(100px)返回不同的矩阵。让我们看看下面第二种安排的例子。

如何转换scale()和translateX()运行matrix()：

考虑以下transform属性：

 img {   transform-origin: 0 0;   transform: scale(2) translateX(100px);   width: 80%; }

在 StackBlitz 上试用

transform以下是将上述属性的值转换为的语法matrix()：

 matrix = (scale's homogeneous coordinates) x (translateX's homogeneous coordinates)

让我们通过定义 的齐次坐标开始转换scale(2)：

 | 2 0 0 | ← x-axis | 0 2 0 | ← y-axis | 0 0 1 | ← constants

我们还定义 的translateX(100px)齐次坐标：

 | 1 0 100 | ← x-axis | 0 1  0  | ← y-axis | 0 0  1  | ← constants

现在是时候使用以下语法将两个齐次坐标相乘了：

 | a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr | | b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr | | c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

让我们像这样实现上面的语法：

 | 2 0 0 |   | 1 0 100 |   | 2 + 0 + 0   0 + 0 + 0   200 + 0 + 0 | | 0 2 0 | x | 0 1  0  | = | 0 + 0 + 0   0 + 2 + 0    0 + 0 + 0  | | 0 0 1 |   | 0 0  1  |   | 0 + 0 + 0   0 + 0 + 0    0 + 0 + 1  |

下一步是解决加法。那么，让我们现在开始吧。

 | 2 0 0 |   | 1 0 100 |   | 2 0 200 | | 0 2 0 | x | 0 1  0  | = | 0 2  0  | | 0 0 1 |   | 0 0  1  |   | 0 0  1  |

上面的加法结果为我们提供了属性的齐次坐标transform: scale(2) translateX(100px)。

换句话说，(scale's homogeneous coordinates)和(translateX's homogeneous coordinates)等于的乘积：

 | 2 0 200 | ← x-axis | 0 2  0  | ← y-axis | 0 0  1  | ← constants

因此， 的矩阵等价transform: scale(2) translateX(100px)为transform: matrix(2, 0, 0, 2, 200, 0)。

 img {   transform-origin: 0 0;   transform: matrix(2, 0, 0, 2, 200, 0);   width: 80%; }

在 StackBlitz 上试用

注意transform: scale(2) translateX(100px)等于transform: matrix(2, 0, 0, 2, 200, 0)。并且transform: translateX(100px) scale(2)相当于transform: matrix(2, 0, 0, 2, 100, 0).

换句话说，您编写转换函数的顺序很重要。让我们在下面对此进行更多讨论。

为什么 CSS 转换函数的顺序很重要？

由于浏览器计算矩阵值的方式，您编写CSS 转换函数的顺序很重要。

例如，考虑以下片段：

 div {   position: absolute;   width: 100px;   height: 100px;   transform-origin: 0 0; }  .red {   border: 3px solid red;   background-color: rgba(255, 0, 0, 0.5); }  .green {   border: 3px solid green;   background-color: rgba(0, 128, 0, 0.5);   transform: translateX(100px) scale(2); }  .blue {   border: 3px solid blue;   background-color: rgba(0, 0, 255, 0.5);   transform: scale(2) translateX(100px); }

在 StackBlitz 上试用

绿色和蓝色divs 之间的唯一区别是我们编写它们的转换函数的顺序。

然而，计算机使用不同的值（100px绿色div和200px蓝色）翻译了两个容器。

那么，为什么变换函数的顺序会影响divs 的平移值呢？原因如下：

• 浏览器按顺序（从左到右）乘以每个变换函数的齐次坐标。

换句话说，计算机使用以下语法来计算 greendiv的矩阵：

• Greendiv的矩阵= (translateX 的齐次坐标) x (scale 的齐次坐标)

它使用以下语法来计算 bluediv的矩阵：

• Bluediv的矩阵= (scale 的齐次坐标) x (translateX 的齐次坐标)

因此，转换函数的位置决定了矩阵的参数，因为浏览器是按照从最左边的函数到右边的顺序开始计算的。

知道如何将变换函数转换为matrix()是有益的。并且拥有一些转换工具可以派上用场。因此，让我们讨论一些您可以使用的有用工具。

将变换函数转换为的工具matrix()

可用于将转换函数快速转换为以下两个工具matrix()：

• JavaScript 的window.getComputedStyle()方法
• Eric Meyer 和 Aaron Gustafson 的矩阵解析工具

如何使用window.getComputedStyle()将转换函数转换为matrix()

假设您要将以下变换函数转换为矩阵：

 img {   transform-origin: 0 0;   transform: scale(2) translateX(100px);   width: 80%; }

id您将向图像元素添加一个属性：

 <img   src="/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"   alt=""   id="image" />

然后，在 JavaScript 中，您将：

1. 使用id属性获取图像元素。
2. 使用该window.getComputedStyle()方法获取图像的transform属性值。

这是代码：

 // Get the image element by its id name: const image = document.getElementById("image");  // Get the image element's transform property's value: const matrix = window.getComputedStyle(image).getPropertyValue("transform");  // Log the matrix variable's value to the console: console.log(matrix);

在 StackBlitz 上试用

默认情况下，浏览器将 CSStransform属性的值转换为其矩阵等效值。因此，上面的代码片段返回了图像的计算值。

现在让我们讨论第二种转换工具。

如何使用矩阵分辨率工具将变换函数转换为matrix()

假设您要将以下转换函数转换为matrix()：

 img {   transform-origin: 0 0;   transform: scale(2) translateX(100px);   width: 80%; }

您将执行以下操作：

1. 转到 The Matrix Resolutions 。
2. 将您的转换函数 ( scale(2) translateX(100px)) 粘贴到第一个文本字段中。
3. 单击“红色药丸”按钮生成变换函数的矩阵等价。

单击红色药丸按钮将 CSS 变换函数转换为 matrix() 函数

提示：使用matrix3d()创建 3D 变换矩阵。

关于在 CSS 中转换元素的重要知识

以下是在 CSS 中转换元素时要记住的三个基本事实。

1. Transform创建堆叠上下文

假设您将该transform属性设置为 以外的任何值none。在这种情况下，浏览器将创建一个堆栈上下文。转换后的元素将作为它包含的任何绝对或固定定位元素的包含块。

2.缩放和缩放动画导致可访问性问题

每当您在应用程序中包含缩放或缩放动画时，请为用户提供关闭动画的选项。此选项是必要的，因为缩放和缩放动画会导致可访问性问题。

3.并非所有元素都是可变形的

您不能转换以下盒子模型：

• 不可替换的内联元素
• 表列框
• 表列组

包起来

在本文中，我们讨论了平移、旋转、倾斜、缩放或向 HTML 元素添加透视效果所需的所有 CSS 转换工具。

我希望你发现这篇文章很有帮助。

（更|多优质内|容：java567 点 c0m）