transform: rotate(30deg) translate(50px);
上面的代码中,rotate函数用于旋转元素,括号中的角度指定旋转的角度,这里是30度。translate函数用于移动元素,括号中的数值指定移动的距离,这里是50像素,因此可以看出,这行代码是用于让元素旋转30度并且向右边移动50个像素。
transform-origin: 50% 50%;
上面的代码中,transform-origin函数用于指定元素旋转的中心点。默认情况下,元素的中心点是它的左上角,但是大家可以使用这个函数来改变它的位置,这里指定的是中心点位于元素的正中心。
transform: rotate(45deg) translate(50px, 50px);
上面的代码中,除了旋转角度不同以外,还有一个不同之处就是translate函数中指定的数值有两个,这是因为前一个数值表示横向移动的距离,后一个数值表示纵向移动的距离。因此,这行代码是将元素旋转45度并且向右下方移动50个像素。
总之,CSS旋转半径是一个非常有用的属性,可以帮助大家创建各种不同的修饰效果,但是要注意使用时要理解好各个函数及其参数的含义,才能发挥出最好的作用。