CSS 变换允许您对 HTML 元素进行平移、旋转、倾斜、缩放或添加透视效果。
本教程讨论了像专家一样转换 HTML 元素所需了解的一切。
因此,事不宜迟,让我们讨论 CSStransform属性。
(更|多优质内|容:java567 点 c0m)
CSStransform属性指定您希望应用于 HTML 元素的转换效果。
语法如下:
html-element {
transform: value;
}
CSStransform属性接受以下值:
注意:该transform属性接受一个或多个CSS 转换函数。例如,这是一个有效的transform声明:
p {
transform: perspective(370px) scaleZ(5) rotate(17deg);
}
在上面的代码片段中,我们为transform属性分配了三个转换函数。让我们多谈谈一些transform价值观。
rotate()通过围绕固定点二维旋转元素来变换元素。
笔记:
rotate()接受一个参数。这是语法:
element {
transform: rotate(angle);
}
请注意以下事项:
以下是 CSSrotate()功能如何工作的一些示例。
img {
transform: rotate(0deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate()函数为图像元素指定零度 (0⁰) 旋转。
img {
transform: rotate(45deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate()函数为图像元素指定四十五度 (45⁰) 旋转。
img {
transform: rotate(-70deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate()函数为图像元素指定负七十度 (70⁰) 旋转。
rotateX()通过绕 X 轴三维旋转来变换元素。
显示 X、Y 和 Z 轴的三维笛卡尔坐标系
rotateX()接受一个参数。这是语法:
element {
transform: rotateX(angle);
}
请注意以下事项:
以下是 CSSrotateX()功能如何工作的一些示例。
img {
transform: rotateX(0deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotateX()函数指定图像绕 X 轴的零度 (0⁰) 旋转。
img {
transform: rotateX(70deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotateX()函数指定图像绕 X 轴旋转七十度 (70⁰)。
rotateY()通过绕 Y 轴三维旋转来变换元素。
rotateY()接受一个参数。这是语法:
element {
transform: rotateY(angle);
}
请注意以下事项:
以下是 CSSrotateY()功能如何工作的一些示例。
img {
transform: rotateY(0deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotateY()函数指定图像绕 Y 轴的零度 (0⁰) 旋转。
img {
transform: rotateY(70deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotateY()函数指定图像绕 Y 轴旋转七十度 (70⁰)。
rotateZ()通过绕 Z 轴三维旋转来变换元素。
rotateZ()接受一个参数。这是语法:
element {
transform: rotateZ(angle);
}
请注意以下事项:
以下是 CSSrotateZ()功能如何工作的一些示例。
img {
transform: rotateZ(0deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotateZ()函数指定图像绕 Z 轴的零度 (0⁰) 旋转。
img {
transform: rotateZ(70deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotateZ()函数指定图像绕 Z 轴旋转七十度 (70⁰)。
rotate3d()通过绕 x、y 和 z 轴三维旋转来变换元素。
rotate3d()接受四个参数。这是语法:
element {
transform: rotate3d(x, y, z, angle);
}
请注意以下事项:
以下是 CSSrotate3d()功能如何工作的一些示例。
img {
transform: rotate3d(0, 0, 1, 70deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate3d()函数指定图像绕 Z 轴旋转七十度 (70⁰)。
img {
transform: rotate3d(1, 1, 1, 70deg);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate3d()函数指定图像绕 x、y 和 z 轴旋转七十度 (70⁰)。
CSS 旋转函数和 CSSrotate属性提供了两种类似的方式来指定旋转变换。
两种旋转技术的主要区别如下:
下面是一些例子。
img {
rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate属性为图像元素指定四十五度 (45⁰) 旋转。
img {
rotate: x 70deg; /* Equal to a transform: rotateX(70deg) property */
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate属性指定图像绕 X 轴旋转七十度 (70⁰)。
img {
rotate: y 70deg; /* Equal to a transform: rotateY(70deg) property */
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate属性指定图像绕 Y 轴旋转七十度 (70⁰)。
img {
rotate: z 70deg; /* Equal to a transform: rotateZ(70deg) property */
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该rotate属性指定图像绕 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值告诉浏览器不要旋转所选元素。
scale()通过从固定点二维调整(缩放)元素来变换元素。
笔记:
scale()接受两个参数。这是语法:
element {
transform: scale(x, y);
}
请注意以下事项:
显示 X 轴和 Y 轴的二维笛卡尔坐标系
以下是 CSSscale()功能如何工作的一些示例。
img {
transform: scale(0.3);
transform-origin: left;
}
在 StackBlitz 上试用
上面的代码片段使用该scale()函数指定0.3图像元素沿 X 轴和 Y 轴的比例因子。
笔记:
img {
transform: scale(0.3, 65%);
transform-origin: top left;
}
在 StackBlitz 上试用
上面的代码片段使用该scale()函数指定0.3图像沿 X 轴和65%Y 轴的比例因子。
img {
transform: scale(0.3, 1);
transform-origin: top left;
}
在 StackBlitz 上试用
上面的代码片段使用该scale()函数指定0.3图像仅沿 X 轴的比例因子。
笔记:
img {
transform: scale(100%, 0.2);
transform-origin: top left;
}
在 StackBlitz 上试用
上面的代码片段使用该scale()函数指定0.2图像仅沿 Y 轴的比例因子。
笔记:
CSSscale()函数和 CSSscale属性提供了两种类似的方式来指定比例变换。
两种缩放技术之间的主要区别如下:
这是一个例子:
使用 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值告诉浏览器不要缩放所选元素。
scaleZ()通过从沿 z 轴的固定点在三维空间中调整(缩放)元素来变换元素。
笔记:
scaleZ()接受一个参数。这是语法:
element {
transform: scaleZ(number);
}
笔记:
我们经常scaleZ()与其他 CSS 函数一起使用,例如perspective()、translateZ()和rotateX()。下面是一些例子。
img {
transform: perspective(370px) scaleZ(5) rotateX(17deg);
width: 80%;
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
笔记:
img {
width: 40%;
}
.second-image {
transform: perspective(370px) scaleZ(5) translateZ(30px);
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
scale3d()通过从沿 x、y 和 z 轴的固定点在三维空间中调整(缩放)元素的大小来变换元素。
笔记:
scale3d()接受三个参数。这是语法:
element {
transform: scale3d(x, y, z);
}
、和参数是指定 x、y 和 z 坐标的数字x。坐标是浏览器缩放元素的轴。y``z
以下是 CSSscale3d()功能如何工作的一些示例。
img {
transform: perspective(370px) scale3d(1, 1, 5) rotateX(17deg);
width: 80%;
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
笔记:
img {
width: 40%;
}
.second-image {
transform: scale3d(5, 3, 0.05);
transform-origin: top left;
}
在 StackBlitz 上试用
我们使用该函数指定图像沿 x、y 和 z 轴的scale3d()比例因子5、3和。0.05
skew()通过围绕固定点二维倾斜(倾斜)元素来变换元素。
笔记:
skew()接受两个参数。这是语法:
element {
transform: skew(aX, aY);
}
请注意以下事项:
以下是 CSSskew()功能如何工作的一些示例。
img {
transform: skew(30deg);
transform-origin: top;
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该skew()函数仅沿 x 轴在图像上应用三十度 (30⁰) 倾斜。
注: skew(30deg)等同于skewX(30deg).
img {
transform: skew(0, 40deg);
transform-origin: top left;
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该skew()函数仅沿 y 轴在图像上应用四十度 (40⁰) 倾斜。
笔记:
img {
transform: skew(30deg, 40deg);
transform-origin: top left;
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该skew()函数沿 x 轴在图像上应用三十度 (30⁰) 倾斜。沿 y 轴四十度 (40⁰)。
translate()通过二维重新定位(平移)元素来转换元素。
translate()接受两个参数。这是语法:
element {
transform: translate(x, y);
}
请注意以下事项:
以下是 CSStranslate()功能如何工作的一些示例。
img {
transform: translate(150px);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该translate()函数将图像150px沿 x 轴从其原始位置重新定位。
注: translate(150px)等同于translateX(150px).
img {
transform: translate(0, 55%);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该translate()函数将图像55%沿 y 轴从其原始位置重新定位。
笔记:
img {
transform: translate(60%, 300px);
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该translate()函数将图像重新定位60%到远离其沿 x 轴和300pxy 轴的原始位置。
translateZ()通过沿 z 轴在三维空间中重新定位(平移)元素来变换元素。
显示 X、Y 和 Z 轴的三维笛卡尔坐标系
translateZ()接受一个参数。这是语法:
element {
transform: translateZ(length);
}
该length参数指定您希望将元素从其原始 z 轴位置移动的距离。
三维笛卡尔坐标系,红色箭头定义绿色平面的 translateZ 长度
我们经常使用translateZ()withperspective()函数。下面是一些例子。
img {
width: 40%;
}
.second-image {
transform: perspective(33px) translateZ(10px);
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
笔记:
img {
width: 40%;
}
.second-image {
transform: perspective(70px) translateZ(10px);
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
translate3d()通过沿 x、y 和 z 轴在三维空间中重新定位(平移)元素来变换元素。
translate3d()接受三个参数。这是语法:
element {
transform: translate3d(x, y, z);
}
请注意以下事项:
以下是 CSStranslate3d()功能如何工作的一些示例。
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 翻译函数和 CSStranslate属性提供了两种类似的方式来指定翻译转换。
两种翻译技术的主要区别如下:
下面是一些例子。
img {
translate: 60% 300px; /* Equal to a transform: translate(60%, 300px) property */
width: 80%;
}
在 StackBlitz 上试用
上面的代码片段使用该translate属性将图像60%沿 x 轴从其原始位置重新定位。从300px它的 y 轴。
注意:假设您希望沿 z 轴平移一个元素。在这种情况下,在perspective要翻译的元素的“父元素”上设置一个属性。否则,元素将不会沿其 z 轴移动。
img {
width: 40%;
}
p {
perspective: 35px;
}
.second-image {
translate: 0px 0px 17px; /* Equal to a transform: translateZ(17px) property */
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
img {
width: 40%;
}
p {
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值告诉浏览器不要翻译所选元素。
perspective()通过向元素添加一些透视效果来变换元素。
perspective()只接受一个参数。这是语法:
element {
transform: perspective(length);
}
参数length指定用户到z=0 平面的距离。
三维笛卡尔坐标系,红色箭头定义用户与 z=0 平面之间的距离
我们经常perspective()与其他 CSS 函数一起使用,例如translateZ()、rotateX()和rotateY()。下面是一些例子。
img {
width: 40%;
}
.second-image {
transform: perspective(33px) translateZ(10px);
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
请注意以下事项:
img {
width: 40%;
}
.second-image {
transform: perspective(33px) rotateY(-10deg);
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
img {
width: 40%;
}
.second-image {
transform: perspective(33px) rotateX(17deg);
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
CSSperspective()函数和perspective属性提供了两种类似的方式来为 HTML 元素添加透视效果。
两种透视技术的主要区别如下:
这是一个例子:
使用 CSSperspective属性给子元素添加透视效果:
img {
width: 40%;
}
p {
perspective: 33px;
}
.second-image {
rotate: x 17deg;
}
在 StackBlitz 上试用
这是我们在上面的代码片段中所做的:
笔记:
CSSmatrix()函数是以下 2D 变换函数的简写:
换句话说,而不是写:
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 上试用
该matrix()函数接受六个值。语法如下:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
您可以将 CSS 矩阵的值表示为ℝℙ 2上的齐次坐标,如下所示:
| scX skX tX | ← x-axis
| skY scY tY | ← y-axis
| 0 0 1 | ← constants
请注意以下事项:
以下是 CSSmatrix()函数的一些示例。
考虑以下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
下面是另一个例子。
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
下面是第三个例子。
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)返回不同的矩阵。让我们看看下面第二种安排的例子。
考虑以下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 转换函数的顺序很重要。
例如,考虑以下片段:
p {
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 上试用
绿色和蓝色ps 之间的唯一区别是我们编写它们的转换函数的顺序。
然而,计算机使用不同的值(100px绿色p和200px蓝色)翻译了两个容器。
那么,为什么变换函数的顺序会影响ps 的平移值呢?原因如下:
换句话说,计算机使用以下语法来计算 greenp的矩阵:
它使用以下语法来计算 bluep的矩阵:
因此,转换函数的位置决定了矩阵的参数,因为浏览器是按照从最左边的函数到右边的顺序开始计算的。
知道如何将变换函数转换为matrix()是有益的。并且拥有一些转换工具可以派上用场。因此,让我们讨论一些您可以使用的有用工具。
可用于将转换函数快速转换为以下两个工具matrix():
假设您要将以下变换函数转换为矩阵:
img {
transform-origin: 0 0;
transform: scale(2) translateX(100px);
width: 80%;
}
id您将向图像元素添加一个属性:
然后,在 JavaScript 中,您将:
这是代码:
// 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():
img {
transform-origin: 0 0;
transform: scale(2) translateX(100px);
width: 80%;
}
您将执行以下操作:
单击红色药丸按钮将 CSS 变换函数转换为 matrix() 函数
提示:使用matrix3d()创建 3D 变换矩阵。
以下是在 CSS 中转换元素时要记住的三个基本事实。
假设您将该transform属性设置为 以外的任何值none。在这种情况下,浏览器将创建一个堆栈上下文。转换后的元素将作为它包含的任何绝对或固定定位元素的包含块。
每当您在应用程序中包含缩放或缩放动画时,请为用户提供关闭动画的选项。此选项是必要的,因为缩放和缩放动画会导致可访问性问题。
您不能转换以下盒子模型:
在本文中,我们讨论了平移、旋转、倾斜、缩放或向 HTML 元素添加透视效果所需的所有 CSS 转换工具。
我希望你发现这篇文章很有帮助。
(更|多优质内|容:java567 点 c0m)
页面更新:2024-03-06
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号