旋转 CSS

CSS中的旋转是一种非常有用的技术，无论是创建有趣的动画还是将元素变形。让我们一探究竟。

旋转元素

要旋转一个元素，我们需要使用 transform 属性。 transform 属性允许我们对元素应用各种变换，包括旋转，缩放，扭曲等等。

.rotate {
    transform: rotate(30deg);
}

上面的代码将使带有 .rotate 类的元素以30度的角度进行旋转。

旋转原点

CSS默认以元素中心点为旋转原点，但我们可以更改旋转原点的位置。

.rotate {
    transform-origin: top left;
}

上面这行代码将以 .rotate 元素的左上角为旋转原点。

2D 和 3D 旋转

CSS旋转不仅限于2D，还可以进行3D旋转。

.rotate {
    transform: rotateX(45deg);
}

上面的代码将 .rotate 元素以45度的角度沿着 X 轴进行旋转。同样，我们也可以使用 rotateY 和 rotateZ 进行沿 Y 轴和 Z 轴的旋转。

动画中使用旋转

我们可以对元素应用旋转动画，使其更有趣。

.rotate {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

上面的代码将应用一个名为 spin 的动画，该动画使元素以线性速度在2秒钟内旋转360度。

总结

CSS旋转是一种强大而有用的技术，我们可以使用它来创建有趣的动画，变形元素等等。我们可以使用旋转原点来更改旋转的中心点，并且还可以进行3D旋转。最后，我们可以在动画中使用旋转来使其更具吸引力。