css3中的提供的元素变化属性
通过 CSS3 提供的2d元素转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
css3中为我们 提供了:
translate()
rotate()
scale()
skew()
matrix() 些方法来对对象进行位移,旋转,缩放,或者拉伸。
注意:Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
1. translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数值移动。
{
transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */
}
2. ranslate() 方法,规定按照顺时针方向旋转设定的角度。
{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}
设置角度为30度的偏转。
3. scale()方法 元素的尺寸根据给定的参数放大或者缩小,宽度为x轴,高度为y轴。
{transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}
4. skew()方法 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。
div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}
5. matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}
以上为css3提供的2d属性,希望对大家的学习有帮助。
最新文章
- Linux如何查看JDK的安装路径
- Android开发之时间日期1
- SQL中 Left Join 与 Right Join 与 Inner Join 与 Full Join的区别
- Centos 6.5(64bit)上安装Vertica single node
- SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]
- JSP里的c:url中的/代表站点根目录还是WEB根目录?(待解答)
- Windows XP搜索功能 ";包含文字"; 搜索不到内容的解决办法
- ubuntu12 开机自动转到命令行
- [XML] C#XMLProcess操作Xml文档的帮助类 (转载)
- [Javascript] Using JSHint for Linting with Gulp
- 自己创建一个android studio在线依赖compile
- 【转载】Sqlserver数据库中无自增Id的情况下使用ROW_NUMBER()函数进行数据分页
- Django commands自定制
- SpringBoot+Elasticsearch
- 如何print 输出不换行(2 和 3 处理方式 不一样)
- python3 Django集成Ueditor富文本编辑器
- HDU - 6440 Dream 2018中国大学生程序设计竞赛 - 网络选拔赛
- PEP8 Python编程规范
- C++ map<;key , value>; key值为指针
- PHP基础语法 【】【】 PHP函数