css3中新增的变形动画属性,css3中的变形（transform）、过渡（transition）、动画（animation）属性讲解...

css3中制作动画的几个属性：css3中的变形(transform)、过渡(transition)、动画(animation)。

一、 CSS3变形(transform)

语法：

transform ： none | [ ]*

也就是：

transform: rotate | scale | skew | translate |matrix;

1.1、旋转rotate()

rotate() :通过指定的角度参数对元素指定一个2D rotation(2D旋转)，需先有transform-origin属性的定义( 默认旋转中点是中心点 )。

transform-origin定义的是旋转的基点，其中angle是指选择角度，正顺时针旋转，负逆时针旋转。(关于变形基点已在前几篇中讲解过， https://segmentfault.com/a/11... )

1.2、移动translate(X,Y)

transform(100px,20px);

transform:translateX(100px):