CSS3 动画制作学习（一）_html/css_WEB-ITnose

css3动画制作有那么三个属性：transform（变形）、transition（转换）、animation（动画），今天有时间就来学习下transform，毕竟最近碰到它了，觉得这个不会还是不好吧！

这里主要是我记录学习的地方，会查好多人的博客什么的啊，我会列出来，绝不是为了抄袭。

http://www.w3cplus.com（w3cplus非常好的网站，喜欢原味的请去看看）

transform字面意思就是变形的意思。

一、rotate（旋转）：

这是个函数?，你需要一个角度参数，如：45deg，这个角度为正时表示顺时针旋转，为负的时候表示逆时针旋转，而这时如果你细心的话一定发现他的旋转点是哪个？其实默认的是中心点，如果想指定这个点，就用到transform-origin，如：transform-origin: 20% 30%;这样。（怎么发现如果在后面还有一个块元素，那么旋转的元素相当于position:absolute;并设置z-index，把后面的一个元素压在下面，回来看下）

二、translate（移动）

translate分为三种情况：translate(x, y)水平和垂直都移动的、translateX(x)水平移动、translateY(y)垂直移动。默认的基准点是元素的中心点，你也可以通过transform-origin来设定。eg. transform: translate(100px, 20px); 记住了这写可都是函数啊！！！！！

三、scale（缩放）

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

四、skew（扭曲）

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。

五、matrix（矩阵）

matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。这个就是数学的问题了，等用到了在说了吧，不过我觉得是用不到了。

上面提到的基点都是中心点，只有通过transform-origin来变换的。

1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%（默认值）

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%

其实这个东东也就是学学，毕竟css3正在深入人心，作为一个在一前端为工作的人就应该了解，虽然不一定全用上，但等用上了或者说他已经风靡全球成为普遍的技术的时候，你在来学它也就晚了，所以，我们要在正确的时间做正确的事。（自己在扯淡了）

（总算把transform更新了，写博客真痛苦啊，这还是有点直接挪用，向前辈们致敬！！联系去，未完待续.........）