transform 的各种使用方法，看看全不全

站长

2024年04月22日 08:45 · 阅读数 2

transform 是一个非常有用的 CSS 属性，它允许你在元素上进行各种变换，比如旋转、缩放、移动和倾斜，从而创建出各种动画和视觉效果。这里有一些常见的 transform 属性值及其用法：

rotate() ：旋转元素。可以通过指定角度值来旋转元素，例如 transform: rotate(45deg); 将元素顺时针旋转 45 度。
scale() ：缩放元素。可以通过指定比例值来增大或缩小元素，例如 transform: scale(1.5); 将元素放大为原始大小的 1.5 倍。
translate() ：移动元素。可以通过指定水平和垂直方向的距离值来移动元素，例如 transform: translate(50px, 100px); 将元素向右移动 50 像素，向下移动 100 像素。
skew() ：倾斜元素。可以通过指定水平和垂直方向的角度值来倾斜元素，例如 transform: skew(30deg, 20deg); 将元素水平方向倾斜 30 度，垂直方向倾斜 20 度。
matrix() ：使用 2D 矩阵转换元素。这是一个复合属性，允许你进行更复杂的变换，但使用起来较复杂。

这些属性可以单独使用，也可以组合在一起，形成复合变换，例如：

transform: rotate(45deg) scale(1.5) translate(50px, 50px);

这将按顺序应用旋转、放大和平移变换到元素上。

记住，transform 属性是可以过渡动画的。你可以结合使用 CSS 的 transition 属性来创建平滑的动画效果，让变换更加流畅和动态。

transform-origin

transform-origin 是 CSS 属性，用于设置元素变形的原点。在使用 transform 属性进行旋转（rotate）、缩放（scale）、倾斜（skew）或移动（translate）等变形操作时，transform-origin 决定了这些变形操作的基点。

默认情况下，transform-origin 的值是 50% 50%，这意味着变形操作是围绕元素的中心点进行的。你可以通过设置不同的值来改变这个变形原点。

transform-origin 属性可以接受多种类型的值：

关键字：top、bottom、left、right 和 center。
百分比：相对于元素自身尺寸的百分比，例如 50% 50% 表示中心点。
长度单位：像 px、em 等 CSS 单位，例如 10px 20px 表示距离元素左边缘 10px、上边缘 20px 的点。

此外，transform-origin 还可以设置三个值，分别对应 X 轴、Y 轴和 Z 轴的变形原点，这在进行 3D 变形时特别有用。

下面是一些 transform-origin 的使用示例：

/* 使用关键字 */
.element {
  transform-origin: top left; /* 变形原点在元素的左上角 */
}

/* 使用百分比 */
.element {
  transform-origin: 100% 100%; /* 变形原点在元素的右下角 */
}

/* 使用长度单位 */
.element {
  transform-origin: 10px 20px; /* 变形原点距离元素左边缘 10px、上边缘 20px */
}

/* 结合使用关键字和长度单位 */
.element {
  transform-origin: right 5px; /* 变形原点在元素右边界内侧 5px 的位置 */
}

/* 设置三维变形原点 */
.element {
  transform-origin: 50% 50% 100px; /* 变形原点在元素中心，且距离元素平面向内 100px */
}

/* 移动和旋转 */
.element {
transform: translate(-50%,-50%) rotateZ(45deg);
}

通过调整 transform-origin，你可以控制元素变形的方式和效果，使得动画和过渡效果更加符合设计需求。

transform scale

CSS 的 transform 属性中的 scale 函数用于对元素进行缩放变换。与 scaleY 只沿 Y 轴缩放不同，scale 函数可以同时对元素进行 X 轴和 Y 轴的缩放。

scale 函数可以接受一个或两个缩放值：

当只有一个值时，这个值会同时应用于 X 轴和 Y 轴，即等比例缩放。
当有两个值时，第一个值应用于 X 轴，第二个值应用于 Y 轴，允许非等比例缩放。

下面是一些使用 scale 函数的示例：

/* 等比例缩放 */
.element {
  transform: scale(2); /* 元素在 X 轴和 Y 轴方向都被拉伸到原来的两倍大小 */
}

/* 非等比例缩放 */
.element {
  transform: scale(2, 3); /* 元素在 X 轴方向被拉伸到原来的两倍大小，在 Y 轴方向被拉伸到原来的三倍大小 */
}

在这些例子中，.element 将根据指定的 scale 值进行缩放。如果 scale 值大于 1，元素会放大；如果 scale 值小于 1（但大于 0），元素会缩小；如果 scale 值为负数，元素会在相应的轴方向翻转并缩放。

scale 函数也可以与其他变换函数一起使用，例如 rotate, translate, skew 等，以创建更复杂的效果。

/* 缩放并旋转 */
.element {
  transform: scale(1.5) rotate(45deg);
}

在这个例子中，.element 先被放大到原来的 1.5 倍，然后顺时针旋转 45 度。

值得注意的是，当使用 transform 属性时，默认的变形原点是元素的中心点（50% 50%）。你可以通过设置 transform-origin 属性来改变这个原点。

transform translate()

transform属性中的 translate() 方法用于移动元素的位置，允许你在水平和垂直方向上调整元素的位置。它采用两个参数：第一个参数表示水平方向移动的距离，第二个参数表示垂直方向移动的距离。

基本用法：

transform: translate(50px, 50px); /* 将元素向右移动50像素，向下移动50像素 */

单轴移动：

你也可以只传递一个值，来指定单轴的移动。例如，只指定水平方向移动：

transform: translateX(50px); /* 向右移动50像素 */

或者只指定垂直方向移动：

transform: translateY(50px); /* 向下移动50像素 */

使用百分比：

translate() 方法也可以使用百分比来指定相对于元素自身尺寸的移动。

transform: translate(50%, 50%); /* 将元素移动到自身宽度和高度的50%处 */

组合变换：

translate() 方法可以和其他变换函数一起组合使用，比如和旋转一起：

transform: translate(50px, 50px) rotate(45deg); /* 移动并旋转元素 */

translate() 是一个非常有用的方法，能够让你在不影响文档流的情况下调整元素的位置，特别是在创建动画或调整元素布局时非常有用。

transform: rotate()

transform: rotate() 是 CSS 中用于旋转元素的属性。你可以通过指定角度值来旋转元素，使其顺时针或逆时针旋转。下面是一些具体的使用方法：

基本旋转

通过 transform: rotate()，你可以对元素进行基本的旋转操作。

语法：

.selector {
    transform: rotate(角度值);
}

示例：

/* 将元素顺时针旋转 45 度 */
.rotate-45 {
    transform: rotate(45deg);
}

/* 将元素逆时针旋转 90 度 */
.rotate-90 {
    transform: rotate(-90deg);
}

以中心点旋转

默认情况下，旋转会以元素的中心点为旋转中心。你可以结合 transform-origin 属性来调整旋转中心的位置。

语法：

.selector {
    transform-origin: x轴位置 y轴位置;
    transform: rotate(角度值);
}

示例：

/* 以元素的左上角为旋转中心，顺时针旋转 45 度 */
.rotate-corner {
    transform-origin: top left;
    transform: rotate(45deg);
}

结合动画

你也可以结合 transition 属性创建平滑的旋转动画效果。

语法：

.selector {
    transition: transform 时间 曲线;
}

.selector:hover {
    transform: rotate(新的角度值);
}

示例：

/* 在鼠标悬停时逐渐旋转元素 */
.rotate-on-hover {
    transition: transform 0.3s ease-in-out;
}

.rotate-on-hover:hover {
    transform: rotate(180deg);
}

通过这些方法，你可以使用 transform: rotate() 在网页中创建出各种旋转效果，无论是简单的静态旋转还是带有动画的交互式旋转效果。

transform: matrix()

transform: matrix() 是 CSS 中用于进行 2D 转换的属性之一，它允许你通过一个 2x3 的矩阵来对元素进行变换。这个矩阵由六个值构成，用来描述旋转、缩放、倾斜和平移。

语法：

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

这里的 a 到 f 是矩阵的六个值，它们对应于以下矩阵：

[a  b  0]
[c  d  0]
[e  f  1]

这些值的作用如下：

a 是水平方向的缩放值。
b 是水平方向的倾斜值。
c 是垂直方向的倾斜值。
d 是垂直方向的缩放值。
e 是水平方向的移动值（水平平移）。
f 是垂直方向的移动值（垂直平移）。

示例：

/* 应用一个 2x3 的矩阵变换 */
.matrix-transform {
    transform: matrix(0.866, -0.5, 0.5, 0.866, 50, 100);
}

这个示例中的矩阵对应的效果是一个旋转角度为 30 度的变换（以弧度表示为 π/6），水平方向移动了 50 个像素，垂直方向移动了 100 个像素。

transform: matrix() 是一个强大而灵活的属性，但相对于其他更简单的 transform 属性，它的使用可能需要更多的计算和理解。通常情况下，建议使用 rotate()、scale()、translate() 和 skew() 等更直观的变换函数，除非你需要非常精确和复杂的变换效果。

transform: skew()

transform: skew() 是 CSS 中用于倾斜元素的属性。它允许你在水平和垂直方向上对元素进行倾斜变换。

语法：

.selector {
    transform: skew(水平方向倾斜角度, 垂直方向倾斜角度);
}

示例：

/* 对元素进行水平方向上的倾斜 */
.skew-horizontal {
    transform: skewX(30deg);
}

/* 对元素进行垂直方向上的倾斜 */
.skew-vertical {
    transform: skewY(-20deg);
}

/* 对元素同时进行水平和垂直方向上的倾斜 */
.skew-both {
    transform: skew(10deg, 25deg);
}

skew() 函数允许你指定水平和垂直方向上的倾斜角度。正值将使元素朝向右上方倾斜，负值则朝向左上方倾斜。

这个属性可以产生一些有趣的视觉效果，特别是当与其他变换一起使用时。例如，将倾斜与旋转或缩放结合使用，可以创建出更复杂的形状和动画。