css 如何设置定点旋转

CSS 中提供了一种定点旋转的方式，可以通过设置 transform-origin 属性来实现。该属性接受一组数值，代表旋转点的坐标。

例如，以下代码会将一个正方形绕其左上角顶点（0,0）进行旋转：

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transform-origin: 0 0;
    animation: rotate 2s infinite;
}
@keyframes rotate {
100% {
    transform: rotate(360deg);
}
}

在上面的代码中，通过设置 transform-origin 属性为 0 0，将旋转点设置在正方形的左上角。然后使用 animation 属性来定义一个旋转动画，让正方形无限循环绕旋转点进行旋转。

如果想要设置旋转点在正方形的中心点，只需要将 transform-origin 属性的值设置为 50% 50% 即可：

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transform-origin: 50% 50%;
    animation: rotate 2s infinite;
}
@keyframes rotate {
100% {
    transform: rotate(360deg);
}
}
    

通过以上代码，正方形将会绕着它的中心点进行旋转。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！