#CSS

======================================================

1. 平面转换的具体效果

1.1 位移（translate）

• 作用：改变元素在平面内的位置

• 语法：

  transform: translate(x, y);
  /* 或 */
  transform: translateX(x);
  transform: translateY(y);

• 特点：

  • 不影响其他元素的布局
  • 可以使用百分比（相对于自身尺寸）
  • 常用于元素居中对齐

======================================================

1.2 旋转（rotate）

• 作用：使元素绕原点旋转

• 语法：

  transform: rotate(角度); /* 正数顺时针，负数逆时针 */

• 特点：

  • 默认绕元素中心点旋转
  • 角度单位是 deg
  • 取值正负均可，正值顺时针旋转，负值逆时针旋转

1.2.1 改变转换原点

• 默认值：盒子中心点

• 属性：

  transform-origin: 水平原点位置 垂直原点位置;

• 取值：

  • 方位词：left、top、right、bottom、center
  • 像素单位数值
  • 百分比

• 示例：

  /* 绕左上角旋转 */
  .element {
    transform-origin: left top;
  }
  
  /* 绕右下角旋转 */
  .element {
    transform-origin: right bottom;
  }
  
  /* 绕自定义点旋转 */
  .element {
    transform-origin: 50px 100px;
  }

======================================================

1.3 缩放（scale）

• 作用：改变元素的大小

• 语法：

  transform: scale(x, y); /* x、y 为缩放比例 */
  /* 或 */
  transform: scale(比例); /* 等比例缩放 */

• 特点：

  • 默认以元素中心点为缩放原点
  • 缩放比例大于1 放大，小于1 缩小

======================================================

1.4 倾斜（skew）

• 作用：使元素在平面内倾斜

• 语法：

  transform: skew(x角度, y角度);
  /* 或 */
  transform: skewX(角度);
  transform: skewY(角度);

======================================================

1.5 多重转换

• 概念：同时使用多个转换函数

• 语法：

  transform: translate() rotate() scale() skew();

• 技巧：先平移再旋转

  /* 正确顺序：先平移再旋转 */
  transform: translate() rotate();
  /* 错误顺序：先旋转再平移（会导致平移方向也被旋转） */
  transform: rotate() translate();

• 应用场景：如车轮滚动效果，需要同时实现位移和旋转

======================================================

2. 与过渡配合使用

.element {
  width: 100px;
  height: 100px;
  background-color: pink;
  transition: all 1s; /* 添加过渡效果 */
}

.element:hover {
  /* 组合使用多个转换效果 */
  transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
}

======================================================