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 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP可变函数学习小结
2015/11/29 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
axios基本入门用法教程
2017/03/25 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
Djang的model创建的字段和参数详解
2019/07/27 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python实现上下文管理器的方法
2020/08/07 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
SQL SERVER面试资料
2013/03/30 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
编辑个人求职信范文
2013/09/21 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
《学会看病》教学反思
2016/02/17 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫