带你吃透CSS3属性：transition 与 transform-猿码集

1. 什么是 CSS3 transition 和 transform？

CSS3 transition 和 transform 是 CSS3 新增的两个属性。CSS3 transition 定义了元素从一种样式逐渐变化为另一种样式的效果；而 transform 可以对元素进行旋转、缩放、位移等变形操作，使其具有更多的变化效果。

2. CSS3 transition 属性

CSS3 transition 属性包含以下子属性：

2.1 transition-property

用途：指定需要过渡的 CSS 属性名。

取值：可以是一个或多个 CSS 属性名，也可以取值为 ‘all’。

下面的代码是一个例子，其中 ‘width’ 是指需要过渡的 CSS 属性名：

div{
  transition-property: width;
}

2.2 transition-duration

用途：指定过渡动画的持续时间。

取值：时间，以毫秒或秒为单位，可以是小数。

下面的代码是一个例子，其中 ‘0.3s’ 是指过渡动画的持续时间：

div{
  transition-duration: 0.3s;
}

2.3 transition-timing-function

用途：指定过渡动画的时间函数。

取值：可以是以下值之一：’linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’。

下面的代码是一个例子，其中 ‘ease’ 是指过渡动画的时间函数：

div{
  transition-timing-function: ease;
}

2.4 transition-delay

用途：指定过渡动画的延迟时间。

取值：时间，以毫秒或秒为单位，可以是小数。

下面的代码是一个例子，其中 ‘0.5s’ 是指过渡动画的延迟时间：

div{
  transition-delay: 0.5s;
}

3. CSS3 transform 属性

CSS3 transform 属性包含以下子属性：

3.1 transform-origin

用途：指定元素变形的原点。

取值：可以使用一个或两个值，第一个值表示水平方向上的位置，第二个值表示竖直方向上的位置。取值可以是 ‘top’, ‘center’, ‘bottom’ 或者具体位置的百分数或像素值。

下面的代码是一个例子，其中 ‘50% 50%’ 是指变形的原点在元素的中心：

div{
  transform-origin: 50% 50%;
}

3.2 transform-style

用途：指定变形元素的子元素是否继承变形。

取值：可以是 ‘flat’ 或 ‘preserve-3d’。

下面的代码是一个例子，其中 ‘preserve-3d’ 表示子元素也会继承变形：

div{
  transform-style: preserve-3d;
}

3.3 transform

用途：指定元素进行旋转、缩放、位移等变形操作。

取值：可以是一个或多个变形函数组成的列表。

下面的代码是一个例子，其中 ‘rotate(30deg)’ 表示元素进行 30 度的旋转：

div{
  transform: rotate(30deg);
}

4. CSS3 transition 和 transform 的组合应用

transform 属性的变形操作可以与 transition 属性结合使用，实现更加丰富的过渡效果。

4.1 hover 效果示例

下面的代码是一个 hover 效果的示例，当鼠标悬浮在元素上时，元素会逐渐放大，背景色也会逐渐变化：

div{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.3s ease;
}
div:hover{
  transform: scale(1.2);
  background-color: blue;
}

4.2 点击切换效果示例

下面的代码是一个点击切换效果的示例，点击按钮时，元素会进行旋转和位移：

div{
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.3s ease;
}
button{
  cursor: pointer;
}
button.clicked + div{
  transform: rotate(180deg) translateX(100px);
}

HTML 代码如下：

<button class="click">CLICK ME</button>
<div></div>

JavaScript 代码如下：

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('button').classList.add('clicked');
});

5. 总结

CSS3 transition 和 transform 属性可以让页面效果更加丰富、动态，它们的运用需要熟悉各个属性的具体用途和取值，以及结合实际应用场景进行组合运用。

带你吃透CSS3属性：transition 与 transform