CSS3 2D 转换

标签：CSS3 box 转换 缩放 元素 transform 2D angle

CSS3 的 2D 转换可以用来旋转、缩放、平移和倾斜元素，使网页布局更具动感和互动性。

一 transform: translate(x, y);

transform: translate(x, y); 是 CSS3 中用于平移元素的属性。它将元素在水平（x轴）和垂直（y轴）方向上移动一定的距离。x 和 y 值可以是像素 (px)、百分比 (%)、视口单位 (vw, vh) 或其他 CSS 长度单位。

1. 语法

transform: translate(x, y);

• x：水平平移的距离。
• y：垂直平移的距离。

2. 基本使用

.box {
  transform: translate(50px, 100px);
}

这里，.box 元素会根据其自身的宽度和高度，平移 10% 和 20% 的距离。例如，如果 .box 的宽度是 200 像素，平移距离就是 20 像素。

3. 使用百分比

.box {
  transform: translate(10%, 20%);
}

这里，.box 元素会根据其自身的宽度和高度，平移 10% 和 20% 的距离。例如，如果 .box 的宽度是 200 像素，平移距离就是 20 像素。

4. 组合使用

.box {
  transform: translate(50px, 100px) rotate(45deg);
}

在这个例子中，.box 元素不仅平移了 50 像素向右和 100 像素向下，还旋转了 45 度。

5. 注意事项

• 不会影响文档流：使用 translate 不会改变文档中的元素位置，只是在视觉上平移元素。其他元素的位置不会受到影响。
• 性能优化：translate 通常比 top、left 等属性更有效，因为它可以利用 GPU 加速，提升渲染性能，尤其是在动画效果中。
• 合成层：translate 可以将元素提升为一个新的合成层，这可能会改善动画性能，因为该元素的移动不需要重新计算布局。

6. 过渡效果
   要使平移效果平滑，可以结合 transition 属性：

.box {
  transition: transform 0.3s ease;
}

.box:hover {
  transform: translate(50px, 100px);
}

二 transform: scale(x, y)

transform: scale(x, y) 用于缩放元素的大小，其中 x 和 y 分别表示水平和垂直方向上的缩放因子。x 和 y 可以是数字、百分比或其他 CSS 长度单位

1. 语法

transform: scale(x, y);

• x：水平缩放因子（例如 1 表示原始大小，0.5 表示缩小到一半）。
• y：垂直缩放因子。

2. 基本使用

.box {
  transform: scale(1.5, 2);
}

这里，.box 元素会在水平上放大 1.5 倍，在垂直上放大 2 倍。

3. 相等缩放

.box {
  transform: scale(2);
}

scale(2) 会使元素在水平和垂直方向上都放大 2 倍。

4. 注意事项

• 缩放不影响布局：使用 scale 不会改变元素在文档流中的位置，只是视觉上的放大或缩小。
• 性能：scale 通常比 width 和 height 更有效，因为它利用 GPU 加速进行缩放，特别是在动画中表现更好。

三 transform: rotate(angle)

transform: rotate(angle) 用于旋转元素，其中 angle 指定旋转的角度。角度值可以是 deg（度数）、rad（弧度）、grad（梯度）或 turn（圈数）。

1. 语法

transform: rotate(angle);

angle：旋转角度，常用单位是 deg，例如 45deg 或 360deg。

2. 基本旋转

.box {
  transform: rotate(45deg);
}

这里，.box 元素会旋转 45 度。

3. 旋转到负角度

.box {
  transform: rotate(-30deg);
}

-30deg 使元素顺时针旋转 30 度。

4. 注意事项

• 旋转原点：旋转是围绕元素的 transform-origin 点进行的，默认为元素的中心。
• 性能：rotate 通常能很好地利用 GPU 加速，适合用在动画效果中。

四 transform: skew(x-angle, y-angle);

transform: skew(x-angle, y-angle) 用于对元素进行倾斜变换，其中 x-angle 和 y-angle 分别表示水平和垂直方向的倾斜角度。倾斜会使元素的边缘倾斜，但不会改变其实际尺寸。

1. 语法

transform: skew(x-angle, y-angle);

• x-angle：水平倾斜的角度，单位可以是 deg（度数）或 rad（弧度）。例如 30deg 或 0.5rad。
• y-angle：垂直倾斜的角度，单位也可以是 deg 或 rad。

2. 水平倾斜

.box {
  transform: skew(20deg, 0);
}

这里，.box 元素在水平上倾斜 20 度，垂直方向保持不变。

3. 垂直倾斜

.box {
  transform: skew(0, 15deg);
}

15deg 使 .box 元素在垂直方向上倾斜，水平方向保持不变。

4. 水平和垂直同时倾斜

.box {
  transform: skew(20deg, 10deg);
}

这里，.box 元素在水平上倾斜 20 度，同时在垂直上倾斜 10 度。

1. 注意事项

2. 影响布局：倾斜变换会改变元素的外观，但不会改变实际的布局或文档流。

3. 倾斜效果：倾斜变换会改变元素的形状，使其边缘变得斜切，但不会影响元素的实际尺寸。

五 transform-origin

transform-origin 是 CSS 属性，用于指定一个元素的变换（如旋转、缩放等）围绕哪个点进行。默认情况下，变换是围绕元素的中心进行的，但你可以通过调整 transform-origin 属性来改变这一点。

1. 基本语法

transform-origin: x-axis y-axis z-axis;

• x-axis: 规定在水平方向上的位置，可以是长度单位（如 px、em）或百分比（如 50%）。
• y-axis: 规定在垂直方向上的位置，可以是长度单位或百分比。
• z-axis: 规定在 Z 轴上的位置，通常用于 3D 变换，默认为 0。

2. 默认变换原点
   默认情况下，变换围绕元素的中心进行：

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: rotate(45deg);
}

3. 调整变换原点

你可以使用 transform-origin 属性来改变变换的原点。例如，旋转一个元素围绕其左上角：

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform-origin: top left;
  transform: rotate(45deg);
}

或者，使用百分比来调整原点：

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform-origin: 25% 25%;
  transform: rotate(45deg);
}

值的说明
left, center, right: 指定水平方向的原点位置。
top, center, bottom: 指定垂直方向的原点位置。
长度单位: 如 10px, 2em，指定具体的位置。
百分比: 如 50%, 25%，相对于元素的宽高。

六 总结

2D 转换方法

函数	描述
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

标签：CSS3,box,转换,缩放,元素,transform,2D,angle
From： https://blog.csdn.net/qq_48763502/article/details/141707303