其实w3c上的教程已经很清楚了,我也建议大家去看看w3c上的教程
平常写写小动画或者一些简单的动态图,原本可能要js或者动态图片才能实现。所以为什么使用css3做小动画肯定是存在他的优点的:
1 使用js对dom节点操作进行变换会带来大量重排、重绘,使得页面性能不佳
2 css3 动画启用的是硬件加速(GPU),而且对GPU的消耗很小;
主要的的有点就是以上两点了。至于缺点,就是兼容性的问题。可能你为了写一个小动画要写几十行甚至上百行css,这确实是一件很痛苦的事,大家知道css3属性,在IE9之前都是不支持的,但是相信,在不久的将来,低版本的IE一定会被摒弃的。
好了。废话不多说,进入正题;
先介绍两个属性:transform和transtion;
transform包括如下几个参数:
- translate
- rotate
- scale
- skew
- matrix
我们一个个介绍:
~~translate:
translate()的意思是元素根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数从其当前位置移动。可写负值;
例如:
-webkit-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);
-ms-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
transform:translate(100px,100px);
上面的元素现在与其原来的位置左边(left)移动了100px;上面(top)移动了100px;如下图:
~~rotate:
rotate:旋转的意思。就是使原来的元素以一个中心点旋转多少度得到的最后形态;可写负值;
-webkit-transform:rotate(45deg);//deg单位值度数;
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
上面的元素现在与其原来的位置顺势针旋转了45度;如下图:
~~scale:
scale:改变元素的大小;
-webkit-transform:scale(1.2);//为原来的1.2倍
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
上面的元素现在与其原来的大小增大了1.2倍;如下图:
~~skew:
skew:使元素根据给定的角度产生翻转;
-webkit-transform:skew(45deg,30deg);//deg单位值度数;
-moz-transform:skew(45deg,30deg);
-ms-transform:skew(45deg,30deg);
-o-transform:skew(45deg,30deg);
transform:skew(45deg,30deg);
上面的元素现在与其原来的X轴倾斜了45deg,Y轴倾斜了30deg;如下图:
~~matrix
matrix 作用是将所有的transform参数放在一起,最后得到的结果;
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
以上就是transform系列参数了。对了,还一个transform-origin。就是你改变元素的起始点。默认是0 0;可以写成transform-origin:left top或者transform-origin:0 0;transform-origin:10% 10%;等等。
后续内容会慢慢写出来,敬请期待