CSS3中transition、transform分不清楚？

transition（过渡）用于设置元素的样式过渡效果，transform（变形）用于对元素进行旋转、缩放、移动或倾斜等操作，二者在功能、语法、使用场景和效果表现上均有明显区别。具体如下：

• transition：侧重于样式属性的平滑过渡。当元素的某个或某些CSS属性（如宽度、高度、颜色、透明度等）发生变化时，通过设置过渡效果，使这些变化以一种渐进、平滑的方式呈现，而不是直接突变，从而增强页面的交互体验和视觉效果。例如，当鼠标悬停在一个按钮上时，按钮的背景颜色从一种颜色逐渐过渡到另一种颜色，这种颜色的变化过程就是由transition控制的。
• transform：主要对元素进行几何变换操作，包括旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）等。它不会改变元素的文档流位置，只是改变元素在页面中的视觉呈现方式。例如，将一个图片旋转一定角度、放大或缩小图片、将元素在页面中移动位置等，都可以使用transform来实现。

• transition：语法为transition: property duration timing-function delay;。

  property：指定要应用过渡效果的CSS属性名称，如width、height、background-color等。若要为多个属性设置过渡效果，可以用逗号分隔多个属性名。若使用all，则表示为所有可过渡的属性设置过渡效果。

  duration：规定完成过渡效果所需的时间，单位为秒（s）或毫秒（ms）。例如，2s表示过渡效果将在2秒内完成。

  timing-function：指定过渡效果的速度曲线，即过渡效果在时间上的变化速率。常见的值有linear（匀速）、ease（默认值，慢速开始，然后变快，最后慢速结束）、ease-in（慢速开始）、ease-out（慢速结束）、ease-in-out（慢速开始和结束）等，还可以使用cubic-bezier()函数自定义速度曲线。

  delay：定义过渡效果开始前的延迟时间，单位同样为秒（s）或毫秒（ms）。例如，1s表示在触发过渡效果后，等待1秒才开始执行过渡。

  示例代码：

• transform：语法为transform: none|transform-functions;，其中transform-functions提供了多种变形方法，常见的有：

  skewX(angle)：沿着X轴进行2D倾斜转换，angle参数指定倾斜的角度。

  skewY(angle)：沿着Y轴进行2D倾斜转换，angle参数指定倾斜的角度。

  translate(x,y)：在2D平面内对元素进行平移，x和y分别表示在水平和垂直方向上移动的距离。

  translate3d(x,y,z)：在3D空间内对元素进行平移，x、y、z分别表示在三个维度上移动的距离。

  rotate(angle)：对元素进行2D旋转，angle参数指定旋转的角度。

  rotateX(angle)：绕X轴进行3D旋转，angle参数指定旋转的角度。

  rotateY(angle)：绕Y轴进行3D旋转，angle参数指定旋转的角度。

  rotateZ(angle)：绕Z轴进行3D旋转，angle参数指定旋转的角度。

  scale(x,y)：对元素进行2D缩放，x和y分别表示在水平和垂直方向上的缩放比例。若只提供一个参数，则表示在两个方向上使用相同的缩放比例。

  scale3d(x,y,z)：对元素进行3D缩放，x、y、z分别表示在三个维度上的缩放比例。

  示例代码：

• transition：常用于增强页面的交互性和动态效果，例如鼠标悬停效果、按钮点击效果、表单元素的聚焦效果等。通过设置过渡效果，使这些交互过程更加自然、流畅，提升用户体验。
• transform：广泛应用于创建各种复杂的视觉效果和动画，如图片的旋转展示、元素的3D变换、页面的滚动动画等。在网页设计中，可以利用transform实现一些创意性的布局和动画效果，使页面更加生动有趣。

• transition：效果是基于元素样式属性的变化而产生的，它关注的是属性值从初始状态到目标状态的过渡过程，过渡效果是连续的、平滑的。
• transform：效果是对元素本身进行几何变换，不涉及元素样式属性的变化（除了可能因变换导致的视觉上的样式变化，如旋转后元素的显示方向改变），它直接改变元素在页面中的视觉形态，效果可以是静态的，也可以是动态的（结合动画使用）。