📅 最后修改于: 2023-12-03 15:37:59.458000 🧑 作者: Mango
旋转是一种特殊的变换方式，可以通过 CSS transform 属性来实现。在进行旋转时，通常需要指定旋转中心点的位置。而旋转半径则决定了旋转中心点与原点之间的距离，从而影响旋转的效果。
在 CSS 中，可以通过以下属性来控制旋转半径：
transform-origin 属性用于控制旋转中心点的位置。其默认值为元素的中心点，可以通过指定位置或百分比来改变中心点的位置。
下面是一些 transform-origin 的例子：
.box1 {
transform-origin: center;
}
.box2 {
transform-origin: bottom right;
}
.box3 {
transform-origin: 50% 0;
}
上面的代码中，box1 的旋转中心点为元素的中心点，box2 的旋转中心点为元素的右下角，box3 的旋转中心点在元素顶部中心点的位置。
perspective 属性用于指定透视距离，影响元素在三维空间中的表现效果。其默认值为 none，即不启用透视效果。
下面是一个 perspective 的例子：
.container {
perspective: 1000px;
}
上面的代码中，container 元素的透视距离为 1000 像素。在进行旋转时，我们可以通过改变透视距离来调整旋转半径的大小。
perspective-origin 属性用于指定透视距离的原点位置。其默认值为元素的中心点，可以通过指定位置或百分比来改变原点位置。
下面是一个 perspective-origin 的例子：
.container {
perspective: 1000px;
perspective-origin: 50% 50%;
}
上面的代码中，container 元素的透视距离为 1000 像素，透视距离的原点位置为元素的中心点。
backface-visibility 属性用于控制旋转结束后元素的背面是否可见。其默认值为 visible，即可见。
下面是一个 backface-visibility 的例子：
.box {
backface-visibility: hidden;
}
上面的代码中，box 元素在旋转结束后，其背面将不可见。