引言

CSS3旋转动画基础

1.1 旋转属性

CSS3中的transform属性可以用来旋转元素。rotate是其子属性之一,可以单独使用或与其他变换属性结合。

transform: rotate(degree);

其中degree表示旋转的角度,可以是正数或负数。正数表示顺时针旋转,负数表示逆时针旋转。

1.2 单位

旋转角度可以用度(°)、梯度(grad)、弧度(rad)或毫弧度(mrad)作为单位。

1.3 常用旋转动画示例

以下是一个简单的旋转动画示例:

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

.rotate-element {
  animation: rotate 2s infinite linear;
}

实现图片旋转动画

2.1 图片准备

2.2 HTML结构

<div class="rotate-image">
  <img src="path-to-your-image.png" alt="Rotating Image">
</div>

2.3 CSS样式

接下来,添加CSS样式以实现旋转效果。

.rotate-image {
  position: relative;
  width: 200px;
  height: 200px;
}

.rotate-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: rotate 5s linear infinite;
}

2.4 JavaScript控制(可选)

如果你需要更复杂的控制,比如鼠标悬停时停止旋转,可以使用JavaScript。

<script>
document.querySelector('.rotate-image').addEventListener('mouseover', function() {
  this.querySelector('img').style.animationPlayState = 'paused';
});

document.querySelector('.rotate-image').addEventListener('mouseout', function() {
  this.querySelector('img').style.animationPlayState = 'running';
});
</script>

应用场景

旋转动画可以应用于各种场景,如:

  • 导航栏中的图标
  • 轮播图的图片
  • 产品展示的动画效果
  • 桌面背景或壁纸

总结