CSS3学习笔记(二)之CSS转换
来源:互联网 发布:fresh 红茶面膜 知乎 编辑:程序博客网 时间:2024/06/09 23:24
转换就是元素改变形状、颜色和位置。
浏览器支持:Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。
2D转换
translate() \ translateX(n) \ translateY(n)
元素从当前位置移动,根据给定的left(x坐标)和top(y坐标)。
例:div { transform:translate(50px,100px) } 元素从左侧移动50px,从顶端移动100px。
rorare()
元素顺时针旋转给定的角度,允许负值将逆时针旋转。
例:div{ transform: rorate(30deg) } 元素顺时针旋转30度。
scale() \ scaleX() \ scaleY()
增加或减少元素的尺寸,根据给定的宽度和高度参数。
例:div{ transform: scale(2,4)} 将宽度转换为原始尺寸的2倍,高度转换为原始高度的4倍。
skew() \ skewX() \ skewY()
元素翻转给定的角度,根据给定的水平线和垂直线参数。
例:div{ transform: skew(30deg,20deg) }围绕X轴元素翻转30度,围绕Y轴翻转20度。
matrix()
把所有的2D转换方法组合在一起。该方法需要6个参数,包含数学函数。
3D转换
rotateX()
roateY()
围绕X或Y轴按照给定度数进行旋转。
0 0
- CSS3学习笔记(二)之CSS转换
- CSS学习笔记(二)--CSS3的学习
- css3学习笔记(二)
- css学习笔记之二
- CSS学习笔记(五)--CSS3
- CSS学习笔记(六)--CSS3
- HTML5与CSS3学习笔记(二)
- CSS3+Html5 学习笔记之css 样式加载顺序
- css学习笔记(二)
- css学习笔记(二)
- HTML5学习笔记之二CSS基础
- CSS学习笔记-CSS选择器(二)
- HTML5+CSS3+JS学习笔记-10-CSS3之2D转换的用法
- HTML5+CSS3+JS学习笔记-11-CSS3之3D转换的用法
- Delphi学习笔记(二)之类型转换
- CSS3学习笔记之(三)选择器
- Struts2学习笔记之类型转换 二
- CSS3学习笔记之CSS3功能介绍
- iOS7—Day by day
- objective-c posing
- Struts+Spring+Hibernate内存泄漏查找与处理
- python 字符串处理
- 30、JAVA – 虚函数、抽象函数、抽象类、接口
- CSS3学习笔记(二)之CSS转换
- 2014年4月操作系统份额:Windows XP仍然在26%以上,Linux微涨
- Android 异步加载数据 AsyncTask
- Proxy Design Pattern(代理设计模式)
- 黑马程序员——多线程
- 网站内部链接优化有哪些?
- 【终端快捷键】Linux terminal 终端常用快捷键
- windows系统上安装与使用Android NDK
- TextView常用属性