css3过度 动画 旋转 |css 最小宽度1100px

.box {
width: 100px;
height: 100px;
background-color: #f00;
transition: transform 1s;
}
.box:hover {
transform: rotate(360deg);
}

上面的代码实现了当鼠标悬停在盒子上时，盒子会沿着中心点旋转360度。其中，transition属性指定了变化的时长，transform属性指定了旋转的角度。

如果想要使盒子在一定时间内不停地旋转，可以使用以下代码：

.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

上面的代码中，animation属性指定了动画名称、时长、过渡方式和循环次数。而@keyframes关键字则定义了动画的具体内容，这里是从0%到100%的旋转动画。

总之，旋转动画是一种简单而又实用的CSS3动画效果。可以使用过渡和关键帧两种方式实现。希望大家能够尝试一下，为网页增添生动的气息。