在CSS中,可以利用
transform属性对元素进行旋转操作。其中,使用
rotate()函数可以实现元素绕着某个点旋转。
rotate() 函数有一个参数,即旋转的角度,单位为度。在这个参数后面,可以加上一个英文单词
deg,表示这个参数是角度。
.box { transform: rotate(45deg); }
上面的代码将 .box 元素顺时针旋转了45度。如果希望元素绕着某个点旋转,则需要在 rotate() 函数前面加上一个函数
translate(),来指定旋转点的位置和元素到该点之间的距离。translate() 函数有两个参数,即水平和垂直方向的距离。
.box { transform: translate(50px, 50px) rotate(45deg); }
上面的代码将 .box 元素向右下方移动了50个像素,并绕着该点逆时针旋转了45度。
需要注意的是,rotate() 函数并不影响元素的位置,只是改变了其视觉表现。如果需要改变元素的位置,还需要结合其他属性一起使用,例如 position。