CSS转换VS转换[关闭]

Question

CSS转换和转换之间的主要区别是什么？

这两者都用于改变对象的当前形状/状态。 （你可以用JS等做漂亮的动画..）

但是我仍然不清楚哪一个用于何处以及用于什么。

Answer 1

他们是完全不同的东西。

Transitions：

CSS Transitions允许CSS值的属性更改在指定的持续时间内平滑发生。

Transforms：

CSS变换允许使用CSS样式化的元素在二维或三维空间中进行变换。

Answer 2

transition和transform是单独的CSS属性，但是你可以向transform提供transition来“动画化”转换。

---

transition

CSS transition属性随着时间的推移侦听对指定属性（背景颜色，宽度，高度等）的更改。

transition属性语法：

selector {
    transtion: [property-name] [duration] [timing-function] [delay]
}

例如，以下样式将在悬停时在1秒的时间内将div的背景颜色更改为橙​​色。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color 1s;
  /* timing function and delay not specified */
}
div:hover {
  background-color: orange;
}

<div></div>

---

transform

CSS transform属性在X，Y或Z轴上旋转/缩放/倾斜元素。它的行为与transition无关。简单地说，在页面加载时，元素将显示为旋转/倾斜/缩放。

现在，如果您希望旋转/倾斜/缩放发生，例如当用户在元素上盘旋时，您需要“转换”“转换”。

这是如何：因为transition属性的功能是监听其他css属性的变化，你实际上可以提供transform作为transition的参数，并根据所需的触发器（例如，悬停动作）“动画化”变换。

transform属性语法

select {
    transform: [rotate] [skew] [scale] [translate] [perspective]
}

例如，以下样式将在悬停时在1秒的时间内旋转div。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: transform 1s;
  /* timing function and delay not specified */
}
div:hover {
  transform: rotate(30deg);
}

<div></div>