css3的transition效果和transfor效果示例介绍

下面我将详细讲解 "CSS3 的 Transition 效果和 Transform 效果示例介绍" 的完整攻略，让大家更好地理解。

什么是 Transition 效果

Transition 效果是 CSS3 提供的一个属性，可以让元素在经过某些变化时显示出平滑的过渡效果，比如当 hover（悬停）在一个链接的时候，改变链接的颜色，我们希望这个颜色的变化不要突兀，可以用 Transition 效果来实现。下面是一个 Transition 效果示例：

a {
  color: #3d3d3d;
  transition: color 0.2s ease-out;
}

a:hover {
  color: #ff6600;
}

上面的代码中，我们将 a 标签的文字颜色设置为 #3d3d3d，然后添加了一个 transition 属性，让颜色的变化以 0.2s 的时间呈现，并且使用 ease-out 的方式来进行变化。当鼠标悬停在链接上时 (a:hover)，文字颜色就会过渡到 #ff6600，而且过渡效果非常平滑。

什么是 Transform 效果

Transform 效果是 CSS3 提供的一个属性，可以让元素进行旋转、缩放、倾斜等变换，使其呈现出不同于常规状态的效果。下面是一个 Transform 效果示例：

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  transition: transform 0.5s ease-out;
}

.box:hover {
  transform: rotate(90deg);
}

上面的代码中，我们把一个 div 加上 .box 类名，并设置它的宽高以及背景颜色，然后我们给它添加了一个 transition 属性，让变化在旋转时以 0.5s 的时间呈现，使用了 ease-out 的方式，鼠标悬停时，它将会旋转 90deg，变成纵向的状态。

两个效果结合示例

下面我们来看一个结合了 Transition 效果和 Transform 效果的示例：

<div class="wrapper">
  <div class="card"></div>
</div>

.wrapper {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 150px;
  height: 150px;
  background-color: #ccc;
  transition: transform 0.5s ease-out;
}

.card:hover {
  transform: rotate(360deg) scale(1.5);
}

上面的代码中，我们创建了一个容器 div，并放置了一个背景色为灰色的子元素 div，我们用 flex 布局让子元素居中显示。同时，当我们鼠标悬停在子元素上时，它会顺时针旋转 360deg 并缩放 1.5 倍。而且这个效果会以过渡的方式来实现，具有平滑的视觉效果。

总结

以上就是 "CSS3 的 Transition 效果和 Transform 效果示例介绍" 的攻略，Transition 效果可以使元素的变化更加平滑自然，并且可以传递多个属性进行过渡。而 Transform 效果可以让元素的形态进行旋转、缩放、倾斜等变化，产生更加丰富的视觉效果。两个效果结合使用，能够制作出更加精彩的动画效果。