css3 -- 2D变换
2016-05-29 14:09
513 查看
1、transform
2、旋转
原始的,转换前的元素会保持它在文档流中的位置,所以后续的所有元素都会受到它的影响,经过变换的元素并不影响页面的布局,但它会位于页面剩余部分之上的一个新层次上,这就意味着这个新的元素可以覆盖后续的元素
3、变换原点
4、平移
经过变换的元素会保留它本身的位置
5、倾斜
6、缩放
1 E{ 2 -moz-transform:function(value); 3 -ms-transform:function(value); 4 -o-transform:function(value); 5 -webkit-transform:function(value); 6 transform:function(value); 7 }
2、旋转
1 h2{transform:rotate(-25deg);}
原始的,转换前的元素会保持它在文档流中的位置,所以后续的所有元素都会受到它的影响,经过变换的元素并不影响页面的布局,但它会位于页面剩余部分之上的一个新层次上,这就意味着这个新的元素可以覆盖后续的元素
3、变换原点
1 E{transform-origin:0 0 ;}
4、平移
E{ transform:translateX(value); transform:translateY(value); } E{transform:translate(translateX,translateY);}
经过变换的元素会保留它本身的位置
5、倾斜
E{ transform:skewX(value); transform:skewY(value); } E{transform:skew(skewX,skewY);}
6、缩放
E{ transform:scaleX(value); transform:scaleY(value); } E{transform:scale(scaleX,scaleY);} 使用负值的效果就是垂直的翻转元素
相关文章推荐
- css3 -- 渐变
- SecureCRT如何修改字体样式和大小
- css hack
- 利用 filter 机制给静态资源 url 加上时间戳,来防止js和css文件的缓存问题
- 动感的CSS3 Loading加载文字动画特效
- 利用 filter 机制 给 静态资源 url 加上时间戳,来防止js和css文件的缓存,利于开发调试
- css3 -- 颜色与不透明度
- CSS定义超链接四个状态的正确顺序L-V-H-A
- 灵活的坐标系变换:CSS的position定位方式
- CSS
- 《CSS权威指南》学习记录——字体
- css截图
- CSS基础二:CSS模型
- CSS基础一:CSS基本语法
- 适配主流厂商浏览器插件Autoprefix css
- css3 实现逐帧动画
- 读《图解CSS3》有感——走进CSS3(一)
- 【CSS3特效开发】Repeating-linear-gradient在边框中的独特运用
- css 表格
- json接受服务器数据实现下拉框样式