css3动画1 transform 详解（共含有transform transition animate）

                            Transform学习

2D转换

    图形变换我们能看到的要么是2D的平面变换，还有就是3D的立体变换，当我们看到这些词的时候，“平移”，“旋转”，“拉伸” 这种都是输入2D变换的范畴，转换导致的结构那就是，位置，形状，尺寸等等的改变。

transform 英文意思“变形” 好像变形金刚也是这个单词我也记不清了，反正transform 就是表述了刚才做说那种2d的转换的几种情况。transform 被 safari chrome firefox ie10 支持，如果在ie下使用需要加上前缀-ms-

 

translate

    这种通常被称为平移就是沿着X Y 坐标，对图形进行移动，一种非常常用的转换

   

.tf_translate{
		transform:translate(500px,500px);
}

   使用了这个css 那么就是把图像平移到X坐标500px Y左边500px 处

 

 

rotate

   旋转，图像是以图形的中心为轴的旋转，这个一定要清楚，如果想以指定坐标做旋转的话需要其他做法，

这种旋转是顺时针旋转，可是使用负数，就是逆时针旋转，数值后边请加上deg 这个单位不然是不会正确执行的

 

.tf_rotate{
		transform:rotate(100deg);
}

 

 

scale

   拉伸 沿着X Y 进行拉伸，scale（x,y）两个参数，当然也可以使用scaleX scaleY 进行单独拉伸。

 

.tf_scale{
		transform:scale(1.5,1.5);
	}

 

 

skew

   歪斜，这个可能用到的不多，也是两个参数沿着X Y 轴的歪斜 skew(x,y),注意需要加deg 后缀

 

.tf_skew{
		transform:skew(20deg,20deg);
	}

 

*origin*

 

      这个效果重点介绍一下，上边讲过rotate 选择只有一个参数代表旋转的角度，只要选择肯定会引申出一个概念就是以什么为圆心选择，在css 和div中是没有其他图形的概念，只有矩形概念所有的块级，行内级都是一个个小小的矩形，这里会有网友疑问，他可以绘制出圆形，或者椭圆，那是你使用了css一些特殊属性，而不是我们使用svg或者canvas 就有标准的图形输出，那么rotate 所有的旋转都是按照这个矩形块的圆心进行旋转。

       这就肯定引发一个问题，相当一部分时候我们不是让图形按照中心旋转，例如指定坐标，或者左上角等等，我不知道为什么css3 的transform中设计有origin 这个单独处理图形旋转的接口，如果你大量使用过svg矢量绘图，你会发现transform 中也有rotate 的概念，而且他多了两个参数rotate(deg,x,y),后两个就是指定图形旋转圆心点，下边用图形说明一下origin 的用法

 

 

 

这里重点介绍一下图形1 ，下边原理都是相同，图形是左上顶点标记为0，0，右下点标记为100% 100%，所以这个跟SVG rotate 的用法稍微不同，按照这种规律，你很容易就能找到一个矩形关键的九个点，分别是

（top middle bottom）（left center right）去标 x y 对应的9个点就是

left top （0,0）

center top(50%,0)

right top(100%,0)

right middle(100%,50%)

right bottom(100%,100%)

center bottom(50%,100%)

left bottom(0,100%)

left middle(0,50%)

center middle(50%,50%)

 

 

 

 

 

 

 

 

     这里有个要注意的，origin 是一定要配合rotate 使用的，不然你只是指定了选择的圆心但是并没有让图形旋转肯定是看不到结果的，

所以这个地方我感觉CSS3 的图形没有svg 设计的更合理，svg 只需要一个接口rotate 就可以指定三个参数实现这个复杂的图形运动。

 

.tf_origin{
		transform-origin:20% 40%;
		transform:rotate(100deg)
	}

 

 

matrix

    这个是上述所有2d变换的汇总，matrix 有六个参数，分别控制平移，歪斜，旋转的所有属性。

.tf_matrix{
		transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	}

 上边介绍了所有的2D变换情况，你可以吧这些css应用到你的图像上，会按照你设定值进行图形转换，但是只能看到图形准换的结果。

 

所有2d转换的方法

matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

 

3D变换介绍

css 支持图形以3D的形式进行变换，下边介绍3d变换中用到的方法

rotateX rotateY rotateZ

在2D 变换中rotate() 这种直接加参数的方式是2d中沿着中心进行选择，3D中故名就是按照XYZ轴进行相应的变换，所以你可以看到肯对不可思议的效果。

 

以上所有的介绍都是图形变形，跟我们在网页上看到的很多效果不同，因为他们使用了很重要的一个属性就是css3中的过渡效果

下一篇介绍过过渡Transition

 

 

 SVG 对比

 

 以为过去做过一段时间SVG 开发本身SVG 拿出来跟canvas 作对比是比较合适但是CSS3中也有这些概念，所以以下每一篇文章都会拿css3 跟SVG 做一下简单对比，因为时间长不用SVG 其中有些东西可能记得不是特别清楚，如果有错误请指正，

上边所说的所有的图形变换的接口SVG 中都有除了origin 这个，SVG中是跟rotate 合并使用.

1：rotate 的用法不一样具体不一样的地方上边已经介绍过，

2：SVG 没有3D概念

3：css3中3D的图形变换接口更丰富,多出了rotateX ,rotateY ,rotateZ 等接口