css3 实现360度无线旋转

Posted 2023-03-29

参考技术A 使用css3 属性方法 rotate() 实现旋转

transform-origin是规定如何旋转
: center center；为以围绕中心点旋转；
top left; 以围绕左上角旋转；
top right; 以围绕右上角旋转；

css旋转180度怎么转

参考技术A

假设有这样一个容器：

<div id="box">

mybox

</div>

旋转之前

旋转之前

transform:rotate(180deg);围绕默认的中心原点旋转180度如下：

围绕中心旋转180度

transform:rotatex(180deg);/*围绕x轴旋转180度*/如下：

围绕x轴旋转180度

transform:rotatey(180deg);/*围绕y轴旋转180度*/如下

围绕y轴旋转180度

2d旋转的默认原点是transform-origin:50% 50%;。可以通过设置transform-origin的值更改2d旋转的原点。