学习一下transform

CSS3的强大是众所周知的,尤其是在移动端开发,PC端因为IE低版本的原因,使得HTML5CSS3的在使用时存在着限制,但是移动端却没有这类的限制,所以更多强大的而方便的CSS3的属性就得到了更好的应用。比如在以前只能使用flash来完成的动画效果,现在基本上可以使用HTML5CSS3来实现了,说起来也主要是基于两个属性吧,canvastransform,这里就对最近使用transform的一些基本的内容总结一下。

transform基本

本部分主要是参考自W3C中关于transform中的说明

浏览器支持

IE Firefox Chrome Safari Opera

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

由此可见,2D转换在所有的高版本浏览器中都是被支持的,而3D转换虽然有更炫的效果,但是如果Opera不支持,所以对于开发中的使用,还是有很大的限制的。

定义和用法

transform 属性向元素应用 2D3D(3D相关内容不在本篇考虑之内) 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.transform=”rotate(7deg)”

这里的JS语法的使用,不同的浏览器还是有些区别的,在webkit内核的浏览器中使用style.webkitTransform,在IE内核的浏览器中可以使用style.msTransform,还有MozTransform,OTransform再加上上面给的transform方法,差不多就兼容了所有的浏览器了吧。所以在使用这种写法时,针对需要支持的浏览器的版本,还是要稍微注意一下的。

基于行为和表现的分离来说,还是使用class来更新一些显示效果,更好一些,所以对于上面的写法,了解即可。

语法以及其可取的值


transform: none|transform-functions;


默认值是none,即不进行转换,transform-functions的取值参考下面的表单。

描述 测试
none 定义不进行转换
matrix(n,n,n,n,n,n) 定义2D转换,使用六个值得矩阵 测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义3D转换,使用16个值得4*4矩阵
translate(x,y) 定义2D转换,元素的移动 测试
translate3d(x,y,z) 定义3D转换,元素的移动
translateX(x) 定义转换,元素的X轴移动 测试
translateY(y) 定义转换,元素的Y轴移动 测试
translateZ(z) 定义3D转换,元素的Z轴移动
scale(x,y) 定义2D缩放转换,分别对应x,y轴的缩放比例 测试
scale3d(x,y,z) 定义3D缩放转换,分别对应x,y,z轴的缩放比例
scaleX(x) 通过设置X轴的值,来定义缩放转换 测试
scaleY(y) 通过设置Y轴的值,来定义缩放转换 测试
scaleZ(z) 通过设置Z轴的值,来定义3D缩放转换
rotate(angle) 定义2D旋转,参数为旋转角度(例如:90deg) 测试
rotated(x,y,z,angle) 定义3D旋转,x,y,z分别为旋转基准点,angle为旋转角度
rotateX(angle) 沿着X轴的3D旋转 测试
rotateY(angle) 沿着Y轴的3D旋转 测试
rotateZ(angle) 沿着Z轴的3D旋转 测试
skew(x-angle,y-angle) 沿着X轴和Y轴的2D倾斜转换 测试
skewX(angle) 沿着X轴的2D倾斜转换 测试
skewY(angle) 沿着Y轴的2D倾斜转换 测试
perspective(n) 3D转换元素定义透视视图

上述一些信息,都是来自于W3C对于transform的基本信息的介绍。其中也有不少实例,可以查看。

使用方法

有时候,当我看到上面这些属性和方法时,我都会觉得,原来这个方法这么简单,只要我记住了这些个属性,那么我就可以很好的使用transform方法,来实现各种需要的效果,但是当我真的发现我需要一种效果时,我却想不到,该如何去实现,这也就是常说的“眼高手低”吧。

基本使用方法

关于转换的最基本的使用方法就是,我给一个元素转一个角度(rotate),移动一下位置(translate),改变一下元素的尺寸(scale),和让元素倾斜(skew),不过总的来说,我觉的这里rotateskew是我们最常用的的吧,也是给我最多惊喜的两个属性了,因为translatescale在没有这个属性之前,我们也可以通过其他的方法实现移动和缩放,只是需要一些复杂的操作而已,而旋转和倾斜,我是真不知道有什么办法可以做到的(在CSS3之前,通过flash的不在考虑范围之内)。

如果只是想要做简单使用,那么使用方法也是非常简单,直接调用想要的功能函数即可。比如我想要把一个元素逆时针旋转90度,可以直接这样写:


.rotate_90{
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}


只要把这个rotate_90class添加到你想要旋转的元素上,就可以实现旋转这个例子在上面的表格中,点击测试链接到W3C的测试页面。或者你可以直接点击查看:“旋转测试”

只是有一点必须要明白,那就是旋转之后,元素会处于一个怎么样的位置,它是以哪一点作为基准点进行旋转的,这里就不得不说到旋转时,基准点的控制了,transform-origin。通过该方法可以设置一个元素的旋转的基准点,也就是旋转轴心的坐标,之后进行旋转就会以这个轴心为中心点进行旋转。
先对比一下没有旋转的时的显示:

下面对该第二个元素进行旋转。如果没有设置,默认情况下,会以元素的中心作为轴心进行旋转的。

左侧围正常的显示,右侧的一个做了90旋转,这里是以元素的中心点为轴心进行的旋转,那现在我使用transform-origin改变旋转的轴心,看看上面的代码会怎么进行显示。现在把基准点设置到元素的左上角,可以添加这个一个class


.originLeftTop{
    -moz-transform-origin:left top;
    -webkit-transform-origin:left top;
    -ms-transform-origin:left top;
    -o-transform-origin:left top;
    transform-origin:left top;
}


当然,这个class可以也可以和旋转相关的代码写在一起的。
那看下把旋转的元素,添加上面的类,会怎么显示吧。

从图中然后对比之前没有旋转时的显示,可以看出,此时是以元素的左上角进行旋转的。看到这里,你也许会发现另外一个问题,那就是旋转之后第二个元素,覆盖了第一个元素的部分。这不由得就让我们想到了一个问题(难道是脱离了文档流,关于这个问题,我后面会在另外的文章中进行说明);

关于设置基准点的取值:transform-origin的初始值是元素中心,transform-origin:50% 50%;如果想要设置自己的旋转基准点,那么可以使用多种属性值的方法改变,可以是:百分比,具体的数值(px,cm,em等),也可以是关键字(left,right等)。可以使用统一的取值单位,也可以混用上面的几种取值。

具体就不多说,可以参考:transform-origin

之所以在这里说基准点的设置,是因为基准点的设置在transform是一个很重要的属性,也是关系到你是否能理解元素旋转之后,显示样式的关键。因为在transform的四种转换属性中,只有translate的结果,是不受基准点影响的,(我其实也觉得translate是一个最没有让我感到惊喜的属性,因为关于元素的移动定位什么的,有很多其他的CSS属性就可以做到的。)

看下基准点的设置对scale的属性的影响:

设置了基准点,基准点在元素左上角


没有设置基准点,所以基准点在元素中心

这里的设置缩放只是把原来的元素放大了1.2倍,由上面两个元素的显示,应该也是可以看出基准点对于缩放的影响了吧,如果不设置基准点,那么就以元素中心点为基准点,向四周平均的缩放。而设置了左上角为中心点之后,缩放则只会向右向下缩放,(这里有兴趣的可以测试一下,如果把这个基准点设置到了非中心,非四角的位置,是怎么个缩放法)

还有一个倾斜的属性,继续试试呗:

设置了基准点,基准点在元素左上角


没有设置基准点,所以基准点在元素中心

有上面的例子作为对比,这里应该也可以很简单的看出,基准点对于倾斜的影响了吧,只是看到了上面的几组显示之后,有没有发现其他的一些问题,会让你想到,这些被旋转的元素,是不是已经脱离了文档流(反正我是觉得,好像是使用position定位了)。

关于这一点,MDNtransform一篇中,有这么一段话可以解释:

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

大概的意思就是,如果transform被设置了一个不同于none的属性值,就会有一个堆栈上下文被创建到该元素,这个元素就会以类似定位的效果展示。(这是我理解的,虽然说是类似定位,但是又不同于定位,这里有些复杂,还是下篇文章,更具体的进行分析一下吧)。

transform使用进阶

前面我们队transform的使用方法有了基本的了解,那么接下来进行一些更复杂一些的使用。

使用多个属性进行组合操作

前面我们对transform的值,都是单一使用的,而transform的强大之处在于,它的这些属性值,是可以组合使用的,

该组中,三个元素没有进行任何转换

该组中,第一个元素没有转换,后面先进行向右移动10像素,后顺时针旋转45度

该组中,第一个元素没有转换,后面先顺时针旋转45度,后进行向右移动10像素

从这上面三个图形中,可以看出一点了吧,虽然移动距离都是很小的距离,但是要注意的是,如果transform会进行多步操作的话,那么后面的操作时基于前面的基础上的,比如上面先进性translate后执行rotate,那么rotate虽然基准点依然是元素的中心点,当然旋转也是按照这个translate之后的位置的中心进行rotate的。

而如果先旋转了,再进行translate,那么旋转时,方向就会是沿着旋转后,元素x轴所对应的方法了。这样说起来有些模糊,拿上面图示中的三个元素作为示例(第三排先旋转后移动),如果最后一个图移动仍然是按照原理的x轴(正向是向右移动),那么理论上执行之后的结果,应该是和第二排的图的最终结果是相同的(第二排和第三排的最后一个图,这个假设下,应该是完全相同的),但是从图中很明显的就可以发现,第三排的最后一个图,上方离上边界是有一点距离的。(对比把后面第一个字盖住的大小和位置,也能确认,他们是不同的)。

当然,这里的基准点的设置(设置基准点为左上角),对于最后图形的显示位置也是会有影响的。看下面的图形展示:

该组中,三个元素没有进行任何转换

该组中,第一个元素没有转换,后面先进行向右移动10像素,后顺时针旋转45度

该组中,第一个元素没有转换,后面先顺时针旋转45度,后进行向右移动10像素

对于上面这三行图形的展示,理论上,在看到设置基准点在左上角之后,就应该能直接就想象出来,如果无法理解原因,那么建议再回头看下前面的介绍,并最transform-origin作进一步的理解。

组合使用,就说这么多了,更复杂的组合,都是基于两个的基础上在使用的,所以如果您能理解上面这个例子,那么更多的组合,也可以理解并可以使用的,如果理解不了,那么您可以再花些时间,从新梳理这里相关的知识了。

使用transform做的展示效果

平常我们在实现一些图片展示时,大都是使用一些瀑布流的结构展示,当然,这里看起来很是整齐,知识有时候,当我们每次都是在看这些瀑布流的图片展示时,是不是也会有些觉得没有新意,没有吸引力了。(反正我会这么觉得)

而如果使用这里的transform,我们就可以做出不同的图片展示效果,举个例子,如果你自己在收拾自己的相册时,把图片一张一张的无规则的铺在桌子上,或者在一些留言板,记忆墙等贴一些贴纸时,整齐而又不规律的显示,是不是会更吸引你的目光呢?

这里transform通过rotate属性,既可简单的实现这一效果,你可以点击这里查看来自W3C中的示例:扔到桌子上面的图片

看了上面的示例,是不是又会想到,如果我继续对图片使用skew属性,那么展示不就更有立体感?看起来更真实了。这个就可以自由发挥了。

transform和box-shadow配合

随着各浏览器对CSS3的支持越来越好,像以前那些需要一些模糊边界的效果,也可以直接使用box-shadow来实现了,但是box-shadow实现的边界都是一些直来直往的,这里因为是看到的别人的一篇的文章,所以我这里也就不再多说,点击查看原文:CSS3 box-shadow实现纸张的曲线投影效果

其他

transform是一个很强大的功能,所以如何才能更好的使用,来完成更多更优秀的想法,依然需要一些经历,一些灵感,这里也就暂且停止。能力有限,暂且说这么多了。

参考文章什么的,都在文章内部做了链接,所以这里就不再列举了。

本文地址:http://www.zhangyunling.com/?p=149

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>