一、CSS Transforms（变形，转换）

  • 用途: transform 属性用于对元素进行旋转、缩放、倾斜或平移等变换。

  • 功能: 它可以改变元素的形状、大小和位置，但不会影响文档流中的其他元素。

  • 示例: transform: rotate(45deg); 会使元素旋转45度。

简单说，CSS Transforms 允许你修改元素的形状、大小和位置，而不需要使用 JavaScript。

1.1 主要的 transform 函数

translate() - 移动元素

 transform: translate(50px, 100px);  /* X轴移动50px，Y轴移动100px */
 transform: translateX(50px);       /* 仅X轴移动 */
 transform: translateY(100px);      /* 仅Y轴移动 */
 transform: translateZ(20px);       /* 3D变换，Z轴移动 */

scale() - 缩放元素

 transform: scale(2);        /* 宽高都缩放为原来的2倍 */
 transform: scaleX(1.5);     /* 仅宽度缩放为原来的1.5倍 */
 transform: scaleY(0.8);     /* 仅高度缩放为原来的0.8倍 */

rotate() - 旋转元素

transform: rotate(45deg);   /* 顺时针旋转45度 */
transform: rotateX(180deg); /* 3D变换，绕X轴旋转 */
transform: rotateY(90deg);  /* 3D变换，绕Y轴旋转 */

skew() - 倾斜元素

transform: skew(30deg, 20deg); /* X轴倾斜30度，Y轴倾斜20度 */
transform: skewX(30deg);      /* 仅X轴倾斜 */
transform: skewY(20deg);      /* 仅Y轴倾斜 */

matrix() - 结合多个变换

transform: matrix(a, b, c, d, e, f);

这个 6 值矩阵对应以下数学变换：
[ a c e ]
[ b d f ]
[ 0 0 1 ]

参数含义
a - 水平缩放
b - 水平倾斜
c - 垂直倾斜
d - 垂直缩放
e - 水平移动
f - 垂直移动

示例：

/* 等比例放大 1.5 倍 */
.matrix-scale {
  transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}

/* 等同于 */
.transform-scale {
  transform: scale(1.5);
}
1.2 重要特性

  • transform 不会改变文档流，其他元素不会因为某个元素的 transform 而重新排列

  • 可以组合多个 transform 函数

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

  • transform-origin 属性可以改变变换的原点

 transform-origin: center;  /* 从中心开始变换 */
 transform-origin: 0 0;     /* 从左上角开始变换 */

二、CSS Transitions（过渡）

  • 用途: transition 属性用于在一定时间内平滑地改变元素的某些样式属性。

  • 功能: 它允许你定义当样式属性发生变化时的过渡效果，如持续时间、延迟、缓动函数等。

  • 示例: transition: background-color 0.5s ease; 会在背景颜色改变时，使用0.5秒的持续时间和“ease”缓动函数来平滑过渡。

简单说：CSS Transitions 允许你控制元素状态变化时的过渡效果，让变化更加平滑。

2.1 transition属性

 transition-property - 指定要过渡的CSS属性，简单说，就是指定哪些CSS属性应该有过渡效果。

transition-property: width;        /* 仅宽度变化时有过渡效果 */
transition-property: all;          /* 所有可过渡属性都有过渡效果 */

transition-duration - 指定过渡效果的持续时间

transition-duration: 1s;           /* 过渡效果持续1秒 */
transition-duration: 200ms;        /* 过渡效果持续200毫秒 */

transition-timing-function - 指定过渡的时间曲线，简单说，就是指定过渡效果的加速或减速方式。

transition-timing-function: ease;          /* 慢快慢 */
transition-timing-function: linear;        /* 匀速 */
transition-timing-function: ease-in;       /* 慢入 */
transition-timing-function: ease-out;      /* 慢出 */
transition-timing-function: ease-in-out;   /* 慢入慢出 */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* 自定义曲线 */

transition-delay - 指定过渡效果开始前的延迟时间

 transition-delay: 0s;            /* 无延迟 */
 transition-delay: 500ms;         /* 延迟500毫秒 */

transition - 简写属性

记忆技巧：pdf-d

将transition想象为一个句子，其中property是谁，duration是做什么，timing-function是怎么做，delay是什么时候做。

可以把它们想象成一个过渡的“剧本”，其中property是剧本的主题，duration是剧本的长度，timing-function是剧本的节奏，delay是剧本开始前的准备时间。

示例一：

transition: property duration timing-function delay;
transition: width 1s ease 0.5s; /* 宽度变化，1秒，慢快慢，延迟0.5秒 */
transition: all 0.3s ease;      /* 所有变化，0.3秒，慢快慢 */

示例二：

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}
2.2 转换触发器：Transition triggers

CSS 必须包含状态更改和触发该状态更改的事件，才能使 CSS 转换生效。

  • :hover：如果光标位于相应元素上方，则匹配。

  • :focus：如果元素获得焦点，则匹配。

  • :focus-within：如果元素或其任何后代获得焦点，则匹配。

  • :target：如果当前网址的片段与元素的 ID 匹配，则匹配。

  • :active：在元素激活时（通常是在鼠标上按下时）匹配。

class 与 JavaScript 之间的变化：当元素的 CSS class 通过 JavaScript 发生更改时，CSS 会转换已更改的符合条件的属性。

示例：

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease, height 1s ease, background-color 1s ease;
}

.element:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}
2.3 Transitions 和 Transforms 的结合使用

两个属性结合使用可以创建丰富的动画效果：

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: rotate(45deg) scale(1.5) translateX(50px);
}

三、关键区别

3.1 功能不同：

  • Transform：改变元素的形状、位置、大小。

  • Transition：控制这些改变发生的方式（持续时间、缓动函数等）。

3.2 触发方式：

  • Transform 本身不会产生动画效果，它只是定义最终状态。

  • Transition 需要有状态变化（如hover、focus等）才能触发。

3.3 性能考量：

  • 使用 transform 和 opacity 进行过渡动画性能更好，因为它们可以利用 GPU 加速。

  • 避免使用 width、height、margin 等属性的过渡，因为它们会触发重排（reflow）。

3.4 3D变换：

  • 两者都支持3D变换，但需要设置 perspective 属性来创建3D效果。

 .container {
     perspective: 1000px;
   }
   .element {
     transform: rotateY(45deg);
     transition: transform 1s;
   }

四、浏览器兼容性

现代浏览器都支持这两个属性，但在一些旧版本浏览器中可能需要添加前缀：

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  -ms-transition: transform 1s;
  transition: transform 1s;
}

总结

Transform负责“变身”，Transition负责“优雅变身”；通过合理使用 Transitions 和 Transforms，你可以创建流畅、高效的动画效果，提升用户体验。