CSS3 2D转换

一、简介

CSS3的2D转换是一组强大的工具，允许您在网页上对元素进行旋转、缩放、倾斜和移动。这些转换是通过在CSS样式中使用特定的转换属性实现的。

二、转换属性

1. transform

transform 是用于应用2D或3D转换的属性。

2. transform-origin

transform-origin 定义了元素在进行转换时的参考点。

三、2D转换函数

1. translate(): 移动元素。接受两个参数，分别表示X和Y轴上的距离。
2. translateX(): 仅在X轴上移动元素。
3. translateY(): 仅在Y轴上移动元素。
4. scale(): 缩放元素。接受两个参数，分别表示X和Y轴上的缩放因子。
5. scaleX(): 仅在X轴上缩放元素。
6. scaleY(): 仅在Y轴上缩放元素。
7. rotate(): 旋转元素。接受一个参数，表示旋转的角度（以度为单位）。
8. skew(): 倾斜元素。接受两个参数，分别表示X和Y轴上的倾斜角度。
9. skewX(): 仅在X轴上倾斜元素。
10. skewY(): 仅在Y轴上倾斜元素。

四、使用示例

以下是一个简单的示例，演示如何使用CSS3的2D转换：

约定一下，假设我们要操作的元素是一个宽 200px，高 100px，边框 1px 的 div，就像这样：

<div style="width: 200px; height: 100px; border: 1px solid blue; "></div>

1. 移动元素：

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

2. 缩放元素：

div {
  transform: scale(1.2, 0.5);
}

3. 旋转元素：

div {
  transform: rotate(15deg);
}

4. 倾斜元素：

div {
  transform: skew(30deg, 20deg);
}

五、转换属性值的简写形式

您可以将多个转换函数组合在一起，并使用简写属性一次性应用于一个元素。例如：

div {
  transform: translate(100px, 50px) scale(1.2) rotate(15deg);
}

上述代码将同时应用移动、缩放和旋转效果。注意，简写属性的顺序很重要，因为它是从左到右应用的。如果您更改了顺序，结果可能会有所不同。

本文地址：https://www.tides.cn/p_docs-css3-2d-transforms