css左右旋转动画

CSS 左右旋转动画可以为网站增添活力，也可以用于设计特定的页面元素和效果。下面让我们来看看如何实现这种效果。

.rotate-animation {
  -webkit-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@media screen and (max-width: 768px) {
  .rotate-animation {
    -webkit-animation: rotate-mobile 1s linear infinite;
    animation: rotate-mobile 1s linear infinite;
  }

  @keyframes rotate-mobile {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(360deg); }
  }
}

首先，我们定义了一个名为 rotate-animation 的 CSS 类，使用了关键帧动画 rotate。该类的作用是让元素左右旋转，循环进行。

在 rotate 关键帧动画中，我们指定了元素从0度到360度（一整圈）的旋转轨迹，通过 transform: rotateY 实现了左右方向的旋转。

为了适应不同屏幕尺寸，我们还使用了@media 查询，当屏幕宽度小于等于768像素时，将动画改为绕着 X 轴旋转。具体实现方式为在 rotate-mobile 关键帧动画中指定 transform: rotateX。

通过这些 CSS 代码，我们可以轻松地为任何需要左右旋转效果的元素添加动画，让网站更有动感和活力。