揭秘CSS旋转魔法：轻松实现图片360°翻转，解锁视觉创意新境界！

引言

CSS旋转原理

CSS中的transform属性允许我们通过rotate函数来实现元素的旋转。rotate函数接受一个角度值，表示元素旋转的度数。当角度为360°时，元素将完成一整圈的旋转。

/* 旋转图片90度 */
img {
  transform: rotate(90deg);
}

实现图片360°翻转

/* 图片翻转动画 */
img {
  width: 200px; /* 设置图片宽度 */
  height: 200px; /* 设置图片高度 */
  animation: rotate 2s linear infinite;
}

/* 定义旋转动画的关键帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在上面的代码中，我们定义了一个名为rotate的动画，它将在2秒内完成一次从0°到360°的旋转，并且会无限循环。

动画细节调整

在实际应用中，我们可能需要调整动画的细节，例如旋转速度、动画方向等。

旋转速度调整

img {
  animation: rotate 1s linear infinite;
}

动画方向调整

img {
  animation: rotate 2s linear infinite reverse;
}

应用于其他元素

/* 按钮翻转动画 */
.button {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: rotate 2s linear infinite;
}

/* 定义按钮旋转动画的关键帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

总结