CSS3中的transform属性进行2D和3D变换的基本用法


Posted in HTML / CSS onMay 12, 2016

transform 2D
之前有看到google将搜寻的页面倾斜,这个功能透过CSS3的transform就可以达成
CSS3 2D transform特性可以旋转、倾斜、放大缩小和移动元素,对网页的视觉观感上提供很大的帮助
使用方法:

CSS Code复制内容到剪贴板
  1. transform: transform-function;   
  2. -webkit-transform: transform-function; /* Safari and Chrome */  
  3. -moz-transform: transform-function; /* Firefox */  
  4. -o-transform: transform-function; /* Opera */  
  5. -ms-transform:transform-function; /* IE9以上 */  

变形函式 transform-function:
函式里的θ参数要有单位,有三种单位可以使用:deg (角度) 、 rad (弧度) 、 grad (梯度)。
1.rotate(θ):以参考点为中心轴 2D 旋转 θ 度。
2.skew(θx,θy):以参考点为中心轴沿着横向倾斜 θx 度、纵向倾斜 θy 度( 可以拆开成skewX(θ)和skewY(θ) )
3.scale(x,y):指定元素由参考点 2D 横向缩放 x 倍、纵向缩放 y 倍( 可以拆开成scaleX(x)和scaleY(y),此函式的参数不需要单位 )
4.translate(x,y):指定元素由参考点 2D 横向移动 x 距离、纵向移动 y 距离( 可以拆开成translateX(x)和translateY(y),此函式的参数单位为px )
5.matrix(a,b,c,d,e,f):指定元素由参考点依据数学变形矩阵 (transformation matrix) 的 6 个参数值产生 2D 变形( 此函式的参数为数字,不需要单位 )
Sample

JavaScript Code复制内容到剪贴板
  1. /* Safari and Chrome 网页倾斜50度 */  
  2. -webkit-transform: rotate(50deg);  

 
transform 3D & perspective
CSS3的transform可以做2D的操作,当然也有3D
但需要再一个拥有perspective属性的父元素才能显现3D的效果
例如:

XML/HTML Code复制内容到剪贴板
  1. <div id="div1"><!-- perspective -->  
  2.   <div id="div2">3D</div><!-- transform -->  
  3. </div>  

perspective属性固名思义就是透视的意思;该属性可以定义3D视觉的角度,让底下子元素使用3D特效时能够完整显示。
perspective使用方法
perspective:150px;

XML/HTML Code复制内容到剪贴板
  1. /* 目前并非所有浏览器皆支援 */   
  2. -webkit-perspective:150px;   
  3. -moz-perspective:150px;  

另外还有个属性叫perspective-origin
功能是用来定义X和Y轴为基础的3D位置(定义初始位置)
perspective-origin使用方法:
属性值:(x轴:left、center、right、长度、百分比) (y轴:top、center、bottom、长度、百分比)

CSS Code复制内容到剪贴板
  1. /* perspective-origin 参数预设是50% 50% */  
  2. -webkit-perspective-origin: 40% 60%;/* Safari and Chrome */  
  3. -webkit-perspective-origin: 40px 60px;/* Safari and Chrome */  
  4. -moz-perspective-origin:left bottombottom/* Firefox */  

注意:perspective和perspective-origin受影响的是子元素,而非元素本身
最后就可以对div做3D的效果(rotateX和rotateY)

CSS Code复制内容到剪贴板
  1. -webkit-transform: rotateX(290deg);   
  2. -webkit-transform: rotateY(290deg);   
  3. -moz-transform: rotateX(290deg);   
  4. -moz-transform: rotateY(290deg);  

 
 
 
 
 

HTML / CSS 相关文章推荐
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 #HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 #HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 #HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 #HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 #HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 #HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 #HTML / CSS
You might like
关于页面优化和伪静态
2009/10/11 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
ext 代码生成器
2009/08/07 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
javascript实现拖放效果
2015/12/16 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python入门之井字棋小游戏
2020/03/05 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
最美乡村医生事迹材料
2014/06/02 职场文书
商场父亲节活动方案
2014/08/27 职场文书
企业委托书范本
2014/09/13 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS