CSS3 Rotation属性
CSS3 Rotation属性可以用来控制元素的旋转角度,它的语法是:transform: rotate(angle),其中angle可以是角度值,也可以是关键字,如:transform: rotate(90deg),表示将元素旋转90度;transform: rotate(180deg),表示将元素旋转180度;transform: rotate(270deg),表示将元素旋转270度。
使用方法
使用CSS3 Rotation属性来控制元素的旋转角度,可以使用以下方法:
- 1. 使用CSS3属性定义旋转角度:transform: rotate(angle),其中angle可以是角度值,也可以是关键字,如:transform: rotate(90deg),表示将元素旋转90度;transform: rotate(180deg),表示将元素旋转180度;transform: rotate(270deg),表示将元素旋转270度。
- 2. 使用CSS3属性定义旋转中心:transform-origin,其值可以是百分比,也可以是关键字,如:transform-origin: 50% 50%,表示将元素的旋转中心设置为元素中心;transform-origin: top left,表示将元素的旋转中心设置为元素左上角。
- 3. 使用CSS3属性定义旋转方向:transform-direction,可以使用关键字定义,如:transform-direction: normal,表示将元素旋转方向从正向顺时针转动;transform-direction: reverse,表示将元素旋转方向从反向逆时针转动。
示例
上面的代码将创建一个宽高都是100px的div元素,背景颜色为#ccc,它将以左上角为旋转中心,以正向顺时针方向旋转90度。