rotate · 前端

## 旋转可以对元素进行旋转,正值为顺时针,负值为逆时针. deg的意思是度数. ``` <style> div { width: 200px; height: 200px; background-color: pink; margin: 0 auto; transition: all .5s; } div:hover{ transform: rotate(360deg); //旋转一周 } </style> </head> <body> <div></div> </body> ``` ## 旋转中心点 ``` <style> div { width: 200px; height: 200px; background-color: pink; margin: 0 auto; transition: all .5s; transform-origin: left top; /*X和Y的值. 默认是center center,也可以使用像素为单位*/ margin: 200px auto; } div:hover{ transform: rotate(360deg); } </style> </head> <body> <div></div> </body> ``` ## 案例