中山网站百度优化,闵行区网站建设,万网wordpress,element ui设计网站CSS3中的transition和transform是制作HTML5动画一定要使用到的两个属性。 注#xff1a;这篇文章不考虑兼容性#xff0c;只讨论webkit核心的浏览器。所以本文的所有例子请用chrome#xff0c;safari或360极速浏览器看。 transition transition对标签的变化过程进行设置。比…CSS3中的transition和transform是制作HTML5动画一定要使用到的两个属性。 注这篇文章不考虑兼容性只讨论webkit核心的浏览器。所以本文的所有例子请用chromesafari或360极速浏览器看。 transition transition对标签的变化过程进行设置。比如我需要将这个图在2s内进行翻转180的动画就使用到这个了 transition可以配置的属性有 transision-property 要变化的属性可以的参数请参考http://www.zhangxinxu.com/css3/css3-transition-property.php transition-duration 变化的速度单位为s http://www.zhangxinxu.com/css3/css3-transition-duration.php transition-timing-funtion 使用的是贝塞尔曲线的方式渐变 http://www.zhangxinxu.com/css3/css3-transition-timing-function.php 值可以是这么几个 transition-delay 是否延迟执行变化单位为s默认值为0 要理解transition-timimg-funtion的几个渐变函数的意思要知道的知识是贝塞尔曲线 贝塞尔曲线 贝塞尔曲线是计算机图形图像绘制曲线的基本工具。它的出现能使得在计算机上绘制出曲线变成可能。其中的三阶贝塞尔曲线可以通过四个点不一定在曲线上确定一个曲线。 贝塞尔曲线有1阶2阶3阶… n阶的形式 1阶的贝塞尔曲线 也称作为线性贝塞尔曲线,公式如下 如果将1阶的贝塞尔曲线应用在坐标图上那么这个曲线就是一条直线 假设P0是坐标点(0,0)P1是坐标点(1, 2)。随着t从0开始不断变化成1B(t)会得出一系列坐标点集合这个集合当然是无限集合将这些坐标点画成一条线那么这条线就是一条直线 这个图画得很矬http://zh.wikipedia.org/w/index.php?title%E8%B2%9D%E5%A1%9E%E7%88%BE%E6%9B%B2%E7%B7%9Avariantzh-cn 上有个动态图非常清晰 三阶的贝塞尔曲线 公式为 这里会看到有四个系数P0P1P2P3。换句话说如果指定了这四个系数那么我们就能得到一个贝塞尔值的集合。 这里要说一下这四个系数可以是数值也可以是二维坐标比如平面坐标点也可以是三维坐标比如颜色RGB。transition的timing-funtion如果作用在颜色上这些系数就是使用三维坐标。 所以transition的timing-function这个属性的不同值就是对应了不同的P系数其实最后呈现出来的效果就是不同的变化速度。这个页面有个例子 http://www.funaio.com/html5/trans/transition.html 我使用ease-in和ease-out来改变图片的旋转速度你能很明显地感觉到ease-in是在开始旋转速度慢后来旋转速度快ease-out则相反。 当然贝塞尔曲线是有n阶的通用形式的 transform transform指的是变换一个东西的拉伸压缩旋转偏移等就是使用这个属性。 transform可以设置这些函数 rotate 将元素进行旋转单位为deg。如rotate(45deg) translate 将元素进行平移。这个属性是可以有两个参数的分别表示向X轴和向Y轴进行平移的量单位为px第二个参数可以默认不填写 比如translate(20px,30px) scale 将元素进行放大或缩小。记住这里的放大和缩小不一定是维持比例的。 scale的参数有两个分别表示向X轴和Y轴进行放大的倍数大小在0~正无穷第二个参数可以默认不填写如果不填写则是默认等比放大缩小。比如scale(2) skew 斜切变化。参数为角度deg skew的参数有两个分别表示X轴Y轴的斜切变化第二个参数可以不填写如果不填写Y轴斜切无变化 基本的操作就是这些这里有一篇文章有很好地例子展示http://hi.baidu.com/rolly_zhang/item/9cc5d24b454f1f07c0161303 注其实transform还设有一个属性matrix这个属性是以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换相当于直接应用一个[a b c d e f]变换矩阵。在下面的文章中会解释到的。 数学的角度来分析transform w3官网上有一篇文章从数学的角度来分析transform: http://www.w3.org/TR/SVG/coords.html 每个元素在html页面上所占有的区域称作viewport,这个区域可以建立出一个二维坐标系Coordinate system这个元素的所有图画上的点在二维坐标系上都有对应的x和y点 transform做的事实际上是将这个二维坐标系进行拉伸放大斜切变化。这个变化可以使用一个矩阵来表示 如果原来的坐标轴表示成为1*3矩阵这里使用1*3而不是使用1*2矩阵应该是考虑3D的变换吧其实在介绍transform的时候z的值一直设置为1没有参与任何运算 每个transform变化表示为1个3*3的矩阵也成变化矩阵 这里可以看到第三行为0,0,1这就意味着这个transform不对z轴空间进行改变。因此其实上面可以填写的参数也只有6个了[a,b,c,d,e,f]看到这里就明白了transform的matrix的6个参数是什么意思 比如拉伸的变化矩阵为 这个拉伸的变化矩阵设置了a和d其余的设置为0 -webkit-transform:scale(2,2); -webkit-transform:matrix(2,0,0,2,0,0); 这两个设置其实效果是一样 更多的变化矩阵请直接看w3的那篇文章 同理如果对一个元素同时进行了拉伸和旋转效果其实际上的效果是将拉伸的变化矩阵和旋转的变化矩阵相乘两个3*3的矩阵相乘结果还是3*3矩阵最后得到的矩阵才是实际的变化效果 transform-origin 下面说说transform-origin 上面说transform的变化其实是将坐标轴进行拉伸旋转等变化那么坐标轴有一个原点这个原点就是这个属性进行设置的了。记住原点是永远不会变化位置的因为它的坐标为0,0,1。 transform-origin有两个参数这两个参数可以是百分比empx等具体的值也可以是left,center,right,top,button这样的描述性语句 就是说 -webkit-transform-origin:right top; -webkit-transform-origin:100% 0%; 这两个其实是一样的 这里给一个例子 其中一个图片只设置了 .transition_function1:hover{ -webkit-transform:scale(2,2); } 另外一个图片设置了 .transition_function2:hover{ -webkit-transform:scale(2,2); -webkit-transform-origin:right top; } 点击查看效果 http://www.funaio.com/html5/trans/transform.html 3D效果 3D效果是个很复杂的东西以后再写一篇来专门研究吧。这里奉上几个css3 3D效果请使用webkit浏览器 图片翻转 http://www.funaio.com/html5/trans/fanzhuan.html 三行翻转有点像google图书馆 http://www.webkit.org/blog-files/3d-transforms/poster-circle.html转载于:https://www.cnblogs.com/liaojie970/p/7645801.html
