【CSS3】变形--旋转 rotate()
2016-02-24 15:31
375 查看
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:
![](http://img.mukewang.com/53390fc500014a6603930267.jpg)
HTML代码:
CSS代码:
演示结果
![](http://img.mukewang.com/5339106f00018d3a04200298.jpg)
需要注意的是:块状元素才可以旋转,rotate()需要配合transform使用。
题目:将文本旋转回到原来水平位置。
index.html:
style.css:
![](http://img.blog.csdn.net/20160224153049452)
![](http://img.mukewang.com/53390fc500014a6603930267.jpg)
HTML代码:
<div class="wrapper"> <div></div> </div>
CSS代码:
.wrapper { width: 200px; height: 200px; border: 1px dotted red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
演示结果
![](http://img.mukewang.com/5339106f00018d3a04200298.jpg)
需要注意的是:块状元素才可以旋转,rotate()需要配合transform使用。
题目:将文本旋转回到原来水平位置。
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变形与动画</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div><span>我不想旋转(^_^)</span></div> </div> </body> </html>
style.css:
.wrapper { margin: 100px auto; width: 300px; height: 200px; border: 2px dotted blue; } .wrapper div{ width: 300px; height: 200px; line-height: 200px; text-align: center; background: green; color: #fff; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform:rotate(-20deg); } .wrapper span { display:block; -webkit-transform:rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); }
相关文章推荐
- css划斜线
- CSS3 transform3D变形
- DIV+CSS区块框浮动设计
- CSS行高——line-height 行间距
- css3常用动画+动画库
- 自定义Toast样式
- 30类CSS选择器
- css3 楼主补知识
- 纯css实现两列等高
- 细说 CSS margin
- css IE下执行的样式,其他浏览器忽略
- css之描点定位方式
- A标签样式定义
- CSS中的ul与li样式详解
- CSS3伸缩盒Flexible Box
- css实现table中td单元格鼠标悬浮时显示更多内容
- div行内样式style常用属性
- CSS 背景 background 讲解
- 引入外部css文件时最好加上type属性,否则有可能引入失败
- css背景渐变兼容(兼容所有ie)