CSS3的常见transformation图形变化用法小结


Posted in HTML / CSS onMay 13, 2016

1.rotate旋转
旋转图片,单位deg,为“度”的意思

CSS Code复制内容到剪贴板
  1. -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg);  

2.scale放大缩小
按比例放大缩小,如 “1.6” 为放大 1.6 倍,若 “-1.6” 则缩小 1.6 倍

CSS Code复制内容到剪贴板
  1. -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6);  

3.translate平移
translate 为指定对象的平移,具有两个参数,第一个为 x 轴方向平移,第二个为 y 轴方向平移。如果第二个参数未提供,则默认值为 0 。

例如,需要设置一个元素在鼠标悬停时进行 x 轴方向 30px 和 y 轴方向 20px 的平移,可以这样编写:

CSS Code复制内容到剪贴板
  1. #translate-demo:hover {   
  2.     -webkit-transform: translate(30px20px);   
  3.     -moz-transform: translate(30px20px);   
  4.     -o-transform: translate(30px20px);   
  5.     -ms-transform: translate(30px20px);   
  6.     transform: translate(30px20px);   
  7. }  

CSS3的常见transformation图形变化用法小结

这里必须说明一点,最新版本的主流现代浏览器(Kayo 测试的是 Chrome 22.0.1229.94 , Firefox 17.0.1 , Safari 5.1.7 , Opera 12.12)除 webkit 内核的 Chorme 和 Safari 外都不需要通过私有属性才能支持 transform 了,但由于早期的现代浏览器中 transform 属性都需要通过各自的私有属性支持,因此为了尽量兼容早期版本的浏览器,在实际项目中使用 transform 时最好使用各自的私有属性,同时为了向后兼容,需要加上没有私有属性的调用。

4.skew倾斜
skew 指定元素斜切扭曲,即元素围绕 x 轴和 y 轴进行倾斜,具有两个参数,第一个对应 x 轴方向的倾斜角度,第二个对应 y 轴方向倾斜角度。如果第二个参数未提供,则默认值为 0 。skew 与 scale 有点相似,但 scale 只旋转元素,不会对元素形状作出改变,而 skew 则会使到元素的形状发生改变。

例如,需要设置一个元素在鼠标悬停时进行 x 轴方向 30 度和 y 轴方向 30 度的斜切扭曲,可以这样编写:

CSS Code复制内容到剪贴板
  1. #skew-demo:hover {   
  2.     -webkit-transform: skew(30deg, 30deg);   
  3.     -moz-transform: skew(30deg, 30deg);   
  4.     -o-transform: skew(30deg, 30deg);   
  5.     -ms-transform: skew(30deg, 30deg);   
  6.     transform: skew(30deg, 30deg);   
  7. }  

CSS3的常见transformation图形变化用法小结

值得注意的是,由于 translate、skew 以及上文提到的 scale 都是以 x、y 轴相关的值作为参数,因此为了方便起见,W3C 还提供了 translateX 和 translateY 、skewX 和 skewY 以及 scaleX 和 scaleY 方法,分别用于独立设置 x 轴和 y 轴方向上的效果。

5.matrix矩阵
matrix 即矩阵,这里具体使用的是一个 3*3 矩阵。
用矩阵表示属性值?
是的,除了 transform 外,CSS3 中另外还有一些属性以 matrix 作为属性值,实际上,matrix 是 transform 中最基本而又最强大的值,上面的 translate 和 skew 以及之前介绍过的 rotate 和 scale 在底层都是通过 matrix 实现的,因此实际上所有的 transform 值都可以通过一个 3*3 矩阵表示。
我们知道,transform 是在 x、y 坐标系上的 2D 变换,因此实际上变换就是元素上每一个点通过一个变换等式进行变化,再产生新的坐标值的过程。因此我们设置旧的 x、y 坐标值分别为 XprevCoordSys 和 YprevCoordSys ,新的 x、y 坐标值分别为 XnewCoordSys 和 YnewCoordSys ,由于变换在 2D 中进行,因此 z 坐标值设为 1 即可。这时再另设 matrix 为如下的一个矩阵,
CSS3的常见transformation图形变化用法小结

则旧的坐标值、新的坐标值与 matrix 中存在如下关系:
CSS3的常见transformation图形变化用法小结

即新旧值之间可以通过矩阵连成等式,因此开发者只需要设定好 matrix 的值,就可以写出自定义的变换了。接下来需要注意,虽然 matrix 是一个 3*3 矩阵,在实际使用时只需填写6个参数(另外3个与 x、y 轴无关),并且调用时需要用如下的顺序 [a b c d e f]
例如编写如下语句:

CSS Code复制内容到剪贴板
  1. #matrix-demo:hover {   
  2.     -webkit-transform: matrix(1, 1, 0, 1, 0, 0);   
  3.     -moz-transform: matrix(1, 1, 0, 1, 0, 0);   
  4.     -o-transform: matrix(1, 1, 0, 1, 0, 0);   
  5.     -ms-transform: matrix(1, 1, 0, 1, 0, 0);   
  6.     transform: matrix(1, 1, 0, 1, 0, 0);   
  7. }  

这样在鼠标悬停时元素会在 y 轴方向上拉伸(即相当于 skewY(45deg) 的效果)。
另外如果同时使用两个或以上的 transform 方法,可以把它们合并书写。

 

HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 #HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 #HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 #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
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
法学专业个人求职信
2013/09/26 职场文书
工作的心得体会
2013/12/31 职场文书
八项规定整改措施
2014/02/12 职场文书
同志主要表现材料
2014/08/21 职场文书
委托书范本
2014/09/13 职场文书
电力工程合作意向书
2015/05/11 职场文书
服装店员工管理制度
2015/08/07 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL