css3 rotation属性控制元素旋转的角度

分类:知识百科 日期: 点击:0

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度。

标签:

版权声明

1. 本站所有素材,仅限学习交流,仅展示部分内容,如需查看完整内容,请下载原文件。
2. 会员在本站下载的所有素材,只拥有使用权,著作权归原作者所有。
3. 所有素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 如果素材损害你的权益请联系客服QQ:77594475 处理。