引言
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>
应用场景
旋转动画可以应用于各种场景,如:
- 导航栏中的图标
- 轮播图的图片
- 产品展示的动画效果
- 桌面背景或壁纸