当前位置:
新疆25选7开奖号码 > 网站开发 > HTML >
-
css教程之rotate() [旋转]
- 2017-05-25 20:42 来源:未知
语法
transform:rotate(<angle>);
语法项目 | 说明 |
---|---|
初始值 | 0 |
适用于 | 块元素和行内元素 |
可否继承 | 否 |
单位 | 角度值deg,弧度值rad,梯度gard,转/圈turn |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
新疆25选7开奖号码 www.d1dx0.cn rotate()函数能够旋转元素,它主要是在二维空间内进行操作,通过一个角度参数值,来设定旋转的幅度。
如果对元素本身或者元素设置了perspective值,那么rotate3d()函数可以实现一个3维空间内的旋转。
关联属性:transform-origin。
取值
rotate(<angle>);<angle>为一个角度值,单位deg,可以为正数或者负数,正数是顺时针旋转,负数是逆时针旋转。
rotateX(angele),相当于rotate3d(1,0,0,angle)指定在3维空间内的X轴旋转
rotateY(angele),相当于rotate3d(0,1,0,angle)指定在3维空间内的Y轴旋转
rotateZ(angele),相当于rotate3d(0,0,1,angle)指定在3维空间内的Z轴旋转
实例代码
CSS
- .rotate_clockwise{
- -webkit-transform:rotate(45deg);
- -moz-transform:rotate(45deg);
- position:absolute;
- left:10px;
- top:80px;
- }
- .rotate_anticlockwise{
- -webkit-transform:rotate(-45deg);
- -moz-transform:rotate(-45deg);
- position:absolute;
- left:200px;
- top:80px;
- }
- .rotateX{
- -webkit-transform:perspective(800px) rotateX(60deg);
- -moz-transform:perspective(800px) rotateX(60deg);
- position:absolute;
- left:400px;
- top:80px;
- }
- .rotateY{
- -webkit-transform:perspective(800px) rotateY(60deg);
- -moz-transform:perspective(800px) rotateY(60deg);
- position:absolute;
- left:600px;
- top:80px;
- }
- .rotateZ{
- -webkit-transform:perspective(800px) rotateZ(60deg);
- -moz-transform:perspective(800px) rotateZ(60deg);
- position:absolute;
- left:800px;
- top:80px;
- }
复制
HTML
运行一下 »- <div class="demo_box rotate_clockwise">顺时针旋转45度</div>
- <div class="demo_box rotate_anticlockwise">逆时针旋转45度</div>
- <div class="demo_box rotateX">3维空间内X轴旋转60度</div>
- <div class="demo_box rotateY">3维空间内Y轴旋转60度</div>
- <div class="demo_box rotateZ">3维空间内Z轴旋转60度</div>
复制
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |
最新更新
C#教程之C#按指定长度分割字符串
C#教程之C#获取当前路径的七种方法
C#教程之.net白盒测试
C#教程之C#中的函数式编程:序言(一)
C#教程之RabbitMQ教程C#版 - "Hello World"
C#教程之外卖小程序对接飞鹅小票打印的
c#教程之C# 程序之间传参数,Args 接收参数
C#教程之C#调用Power Shell 管理Office365 执行
C#教程之Google Chrome 书签导出并生成 MHTM
C#教程之arcEngine开发之IMapControl接口
asp.net教程之纯ASP上传图像文件到数据库实
asp.net教程之ASP错误处理
asp.net教程之ASP网站防范黑客技巧
asp.net教程之用ASP取出HTML里面的图片地址
asp.net教程之ASP实现网页打开任何类型文件
asp.net教程之ASP木马Webshell安全解决办案
asp.net教程之几招让你的网站免受采集之苦
asp.net教程之ASP使用MYSQL数据库全攻略
asp.net教程之Ad Rotator 组件参考
asp.net教程之在Asp中使用存储过程数值类型
sql语句大全之SQL递归查询知多少
sql语句大全之SQL Server 2012 - 多表连接查询
sql语句大全之SQL Server 2012 - 开窗函数
sql语句大全之“RESOURCE MONITOR“CPU占用特别
sql语句大全之关系型数据库基本概念及
sql语句大全之T-SQL语句
sql语句大全之记一个常见的ms sql server中取
sql语句大全之游标 的使用
sql语句大全之sp_executesql 或者 EXECUTE 执行
sql语句大全之SQL Server 用角色(Role)管理数