css旋转180deg 动画

CSS旋转180度的动画可以通过`transform`属性轻松实现。在CSS中，你可以使用`transform: rotate(180deg)`来对元素进行180度的顺时针旋转。如果你想创建动画效果，可以结合`transition`或`@keyframes`规则。

例如，如果你想要元素在一段时间内平滑地旋转180度，你可以这样写：

/* 使用transition */
.rotate-animation {
  transform: rotate(0deg);
  transition: transform 0.5s ease; /* 这里的0.5s是动画时长，ease是缓动函数，可自定义为linear、ease-in、ease-out等 */
}

.rotate-animation:hover {
  transform: rotate(180deg);
}

/* 或者使用@keyframes动画 */
@keyframes rotate180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.rotate-keyframes {
  animation: rotate180 0.5s ease forwards; /* 前向执行动画，保持180度的位置 */
}