css记录：三维变换之transition

在CSS中，transition属性用于在元素从一个样式状态过渡到另一个样式状态时添加动画效果。当用于三维变化（即与transform属性结合使用时），transition可以创建平滑且吸引人的3D动画。

transition属性的基本语法

transition属性是一个简写属性，用于设置以下四个过渡相关属性的值：

transition-property: 指定应用过渡的CSS属性的名称。
transition-duration: 指定过渡效果的持续时间。
transition-timing-function: 指定过渡效果的时间曲线。
transition-delay: 指定过渡效果开始前的延迟时间。

与三维变化结合使用

当与transform属性结合使用时，transition属性可以创建平滑的3D动画。以下是一个简单的例子，展示了一个元素在点击时旋转的3D动画：

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateY(0deg);
  transition: transform 2s ease-in-out; /* 过渡效果应用于transform属性，持续时间为2秒，使用ease-in-out时间曲线 */
}

.box.active {
  transform: rotateY(180deg); /* 当添加.active类时，元素将旋转180度 */
}

html 复制代码

<div class="box" onclick="this.classList.toggle('active')"></div>

在这个例子中，.box元素在默认情况下是平的（没有旋转）。当点击该元素时，会切换.active类，这会使元素在2秒内平滑地旋转180度。由于我们设置了transition属性来监听transform属性的变化，所以旋转效果会呈现出平滑的过渡。

深入解析transition属性

transition-property

这个属性指定了哪些CSS属性应该应用过渡效果。在上面的例子中，我们指定了transform属性。你也可以指定多个属性，例如transition-property: transform, opacity;，这将使transform和opacity属性的变化都产生过渡效果。

transition-duration

这个属性定义了过渡效果的持续时间。在上面的例子中，我们设置了2秒。你可以根据需要调整这个时间。

transition-timing-function

这个属性定义了过渡效果的时间曲线。在上面的例子中，我们使用了ease-in-out，这意味着动画在开始和结束时速度较慢，在中间时速度较快。还有其他一些可用的时间曲线函数，如linear、ease-in、ease-out、cubic-bezier()等。

transition-delay

这个属性指定了过渡效果开始前的延迟时间。例如，如果你设置transition-delay: 1s;，那么过渡效果将在属性变化后的1秒后开始。

简写形式

你可以使用简写形式来同时设置这四个属性的值，如上面的例子所示。简写形式的顺序是：transition-property、transition-duration、transition-timing-function、transition-delay。如果你省略了某个值，它将使用其默认值。

总之，transition属性为CSS动画提供了强大的支持，特别是与transform属性结合使用时，可以创建出令人惊叹的3D动画效果。