transform: rotate(30deg);
这段代码将元素旋转30度,并以元素的中心点为旋转中心。大家可以使用负值旋转元素,甚至可以设置不同的旋转中心。
transform: rotate(-45deg) translate(20px, 20px) translate(-50%, -50%);
这段代码将元素逆时针旋转45度,并向右下方移动20像素,然后将旋转中心移动到元素的中心。大家还可以在CSS中使用transition属性来实现旋转动画效果。
transition: transform 1s ease-in-out;
这段代码将元素的transform属性设置为渐变效果,持续1秒,线性进出。当大家将元素的角度改变时,这个动画效果会自然地展现出来。
总之,旋转是CSS中非常有用的功能之一,可以让网页更加生动有趣。学习如何使用transform属性来旋转元素,有助于大家实现更加创新的网页设计。