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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 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
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php单例模式实现方法分析
2015/03/14 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Python实现购物车程序
2018/04/16 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书