css实现图片旋转动画2d

要实现图片的旋转动画，可以使用 CSS3 的 transform 属性。你可以将图片嵌入到 HTML 页面中，然后使用以下 CSS 代码：

#img {
-webkit-animation: rotate 2s linear infinite;
-moz-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}

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

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

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

其中，ID 为 img 的元素被设定了动画过渡效果，动画名称为 rotate。在 CSS3 中，可以通过 @keyframes 规则来定义动画的过渡状态。在这个例子中，动画从旋转 0 度开始，到旋转 360 度结束，利用了无限循环的方式实现旋转动画。