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

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

目录什么是 CSStransform属性？什么是 CSSrotate()函数？什么是 CSSrotateX()函数？什么是 CSSrotateY()函数？什么是 CSSrotateZ()函数？什么是 CSSrotate3d()函数？CSS 旋转函数与rotate属性：有什么区别？什么是 CSSscale()函数？CSSscale()函数与scale属性：有什么区别？什么是 CSSscaleZ()函数？什么是 CSSscale3d()函数？什么是 CSSskew()函数？什么是 CSStranslate()函数？什么是 CSStranslateZ()函数？什么是 CSStranslate3d()函数？CSS Translate 函数与translate属性：有什么区别？什么是 CSSperspective()函数？CSSperspective()函数与perspective属性：有什么区别？什么是 CSSmatrix()函数？为什么 CSS 转换函数的顺序很重要？将变换函数转换为的工具matrix()关于在 CSS 中转换元素的重要知识包起来

因此，事不宜迟，让我们讨论 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属性的顺序计算转换函数的矩阵——从左到右。浏览器按照以下转换矩阵顺序计算转换属性矩阵：translaterotatescale

下面是一些例子。

如何使用 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%对所选元素应用任何缩放效果。1scale(100%, 0.2)相当于scaleY(0.2).CSSscale()函数与scale属性：有什么区别？

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

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

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

这是一个例子：

使用 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 上试用

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

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

笔记：

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

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

在 StackBlitz 上试用

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

我们使用该perspective()函数来定义370px用户与 z=0 平面之间的距离。该函数指定图像沿 z 轴scaleZ()的比例因子。5我们使用该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 上试用

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

我们使用该perspective()函数来定义370px用户与 z=0 平面之间的距离。该函数指定图像沿 x、y 和 z 轴scale3d()的比例因子1、1和。5我们使用该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 上试用

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

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

笔记：

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

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

在 StackBlitz 上试用

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

我们使用该perspective()函数来定义70px用户与 z=0 平面之间的距离。我们使用该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属性的顺序计算转换函数的矩阵——从左到右。浏览器按以下顺序计算转换属性矩阵：translaterotatescale

下面是一些例子。

如何使用 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 上试用

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

我们使用该perspective属性来定义35px用户与 z=0 平面之间的距离。我们使用该属性将十七个像素 ( ) 沿 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 上试用

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

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

请注意以下事项：

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

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

在 StackBlitz 上试用

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

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

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

在 StackBlitz 上试用

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

我们使用该perspective()函数来定义33px用户与 z=0 平面之间的距离。我们使用该函数绕 x 轴rotateX()旋转十七度 (17⁰)。second-imageCSSperspective()函数与perspective属性：有什么区别？

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

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

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

这是一个例子：

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

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

在 StackBlitz 上试用

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

我们使用该perspective属性来定义33px用户与 z=0 平面之间的距离。我们使用该属性绕 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 中，您将：

使用id属性获取图像元素。使用该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%; }

您将执行以下操作：

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

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

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

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

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

1. Transform创建堆叠上下文

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

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

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

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

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

不可替换的内联元素表列框表列组包起来

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

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

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