基础：使用transform属性

CSS的transform属性是实现旋转效果的核心。通过transform属性，开发者可以对HTML元素应用2D或3D转换，包括平移、缩放、倾斜和旋转。

旋转语法

旋转效果主要通过transform属性的rotate函数实现，语法如下：

.rotated-element {
    transform: rotate(角度);
}

这里的角度可以是正值（顺时针旋转）或负值（逆时针旋转），并且可以使用度（deg）或弧度（rad）作为单位。

示例：旋转一个元素

<img class="rotated-element" src="example.jpg" width="400" height="400" alt="旋转的图片">

我们可以通过以下CSS代码使其旋转45度：

.rotated-element {
    transform: rotate(45deg);
}

进阶：控制旋转中心

旋转的中心点，默认是元素的中心。但在某些情况下，我们可能需要改变这个中心点。这可以通过transform-origin属性实现。

设置旋转中心

transform-origin属性定义了元素的旋转中心点。其取值可以是关键字（如top、bottom、left、right）或百分比。

.rotated-element {
    transform: rotate(45deg);
    transform-origin: center center; /* 默认值 */
}

.rotated-element {
    transform: rotate(45deg);
    transform-origin: top left;
}

实现图片持续旋转

设置动画

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

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

总结