CSS3 2D变形 过渡 动画

CSS3 2D变形、过渡和动画是一个强大的工具，可以用来创建动态的用户界面和富媒体内容。以下是一个简单的示例，展示了如何将2D变形、过渡和动画应用于一个简单的HTML元素。

HTML:

<div class="box"></div>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 30px;
  /* 2D变形 */
  transform: rotate(0deg) scale(1);
  /* 过渡效果 */
  transition: transform 0.5s ease-in-out;
}
 
.box:hover {
  /* 鼠标悬停时的变形 */
  transform: rotate(360deg) scale(1.5);
}
 
/* 使用关键帧动画 */
@keyframes growShrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
 
.box.animated {
  /* 触发动画 */
  animation: growShrink 2s infinite alternate;
}

在这个例子中，.box 元素在没有鼠标悬停时保持正常大小和旋转角度，当鼠标悬停时，它会旋转和放大。通过.animated 类，可以触发一个无限循环的动画，该动画会在大小和正常状态之间切换。这个例子演示了如何结合使用过渡和关键帧动画来创造更生动的用户界面元素。