css3 transform animation 动画 小结

最近在策划自己的博客，本来是想写一个 酷炫 可以让人玩的，全是动画的页面， 结果哎 - - 可以说是非常失败了，这是一个刷牙的动画，变色的狮子，不知道能不能看出来，笑哭,现在针对自己用到的css动画总结一下，这博客肯定要改的，太幼稚了- -
地址：cleverboy32.blog

关于 transform

transfrom => 变形， 它包含 旋转、缩放、变形三个功能。而，这个三个点呢，又分别针对了二维和三维的变形。

1、旋转(-webkit-transform: rotateY(60deg)）

x 就是 后空翻 ， y就是转圈的小彩蝶，z就是，把自己想成顺时针旋转。如果这样还不明白的话，我就去盗图了
rotateX

rotateY

rotateZ

2伸缩（-webkit-transform: scale(1.2)）

scaleX: 只伸缩水平方向，也就是物体的宽度了。
scaleY:只伸缩竖直方向，也就是物体的高度了。
scaleZ: 3D模式下，伸缩物体的厚度，这个目前没写过出3d的物体 - -，所以还没见识过

3 倾斜(-webkit-transform: skew(40deg))

这个也是一样了，
skewX：对于水平方向的倾斜。
skewY: 对于y轴上的倾斜。
skewZ: 3D物体时，对于Z轴上的倾斜了。
想一下，倾斜和旋转有什么区别呢，感觉，倾斜就是旋转啊？？？？这里说明一下，倾斜就是物体的重心倾斜了，比如我们人，重心在肚子上，倾斜就是我们要摔倒的时候的变形。X倾斜就是向前摔或者向后摔， Y就是向左摔，向右摔， 起码你的脚没有离开原地放。而旋转不一样，后空翻的时候你还上天了呢。

又盗图了，倾斜，相当于参照物体中心位置进行的倾斜了，而旋转，是参照物体的某一个边的转动了。

这里还要说一个样式-webkit-perspective: 300;,这个是指定视角的意思，物体的运动变化观看者，肯定是坐在屏幕面前的用户了，这里的值，就是距离屏幕多远，视角越远，看到的物体感觉就很小，越近，看到物体感觉就很大。根据视角的不同，你看的物体样子也不一样，就像什么俯视图、左视图一样，设置了这个，在你写3D空间的时候，才符合我们看到的。

好了，理解了概念，写可以开始写动画了。

关于Aniamation

动画就是：每一秒，改变一下物体的形态，串联起来，就感觉这个物体在动一样。
在写动画的时候，首先要思考，你要做什么动画，物体在不同时候的形态是什么样的，然后写出了，这就是定义它的运动规则。规则定义好了之后，加上一句animation: 规则名，时间，次数，运行速度等，这个物体就按你写的 规则运动起来了。如下图：

看出来了吗，我这个就是物体Y轴方向转动的动画了。

好了，其实理解了概念，动画写法也就很简单了，个人觉得，不简单的是自己首先想做什么动画，然后想明白怎么才能实现。就像我写的小狮子，本来想做一个小圆点会散开然后慢慢聚拢的动画。。。。。再说再说了，有兴趣去实现的，可以克隆我的项目，然后实现哈23333

这里分享一个我文字弧线定位的想法吧。
每一个字符，他们的定位应该在一个圆弧上的不同位置，关于位置的算法，如下图：

所以在绝对定位下，没个字符的left 、top根据 算出来的x、y去写，就实现了= =