首页css t ransform旋转

css t ransform旋转

时间: 2023-11-20 07:49:30 浏览: 77

css实现旋转

用纯css技术实现旋转以及放大的特效

CSS的transform属性可以用来对元素进行旋转。它有两种常用的旋转方式：rotate()和rotateZ()。 1. rotate(angle)：按照指定的角度angle对元素进行旋转。正值表示顺时针旋转，负值表示逆时针旋转。例如，transform: rotate(45deg);会将元素顺时针旋转45度。 2. rotateZ(angle)：与rotate()相同，但只能进行二维旋转。该函数是rotate()的快捷方式，只能指定一个角度。例如，transform: rotateZ(180deg);会将元素顺时针旋转180度。下面是一个示例代码，展示如何使用CSS transform进行旋转： ```html <!DOCTYPE html> <html> <head> <style> .box { width: 100px; height: 100px; background-color: red; transform: rotate(45deg); } </style> </head> <body> <div class="box"></div> </body> </html> ```

阅读全文