CSS2D效果

1、CSS3过渡

通过CSS3，我们可以在不适用Flash动画或javaScript的情况下，
当元素从一种样式变换为另一种样式时为元素添加效果。

IE10、Firefox、Chrome以及Opera支持transition属性。
Safari需要前缀 -webkit-
IE9以及更早的版本，不支持transition属性。
Chrome25以及更早的版本，需要前缀 -webkit-

要实现这一点，必须规定两项内容：
规定希望吧效果添加到那个CSS属性上
规定效果的时长

所有的转换属性：
属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性

transition -property 规定应用过渡的CSS属性的名称
transition -duration 定义过渡效果花费的时间。默认是0
transition -timing-function 规定过渡效果的时间曲线。默认为ease

transition 规定过渡效果何时开始

语法：transition-property：none| all | property；
说明：transition-property属性规定应用过渡效果的css属性名称
当指定的css属性改变时，过渡效果将开始。

none：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。
property：定义应用过渡效果的css属性名称列表，列表以逗号隔开。

语法：transition-duration：time；
说明：transition-duration属性规定完成过渡效果需要花费的时间以
秒或毫秒计算。

time：规定完成过渡效果需要花费的时间，以秒或毫秒计。
默认值是0，以为着不会有效果。

语法:transition-timing-function:linear | ease |ease-in
ease-out | ease-in-out |cubic-bezier(n,n,n,n);
说明：transition-timing-function属性规定过渡效果的速度曲线。

linear：规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier（n，n，n，n）：在cubic-bezier函数中定义自己的值
可能的值是0~1之间的数值。

语法：transition-delay：time；
说明：transition-delay属性规定过渡效果何时开始

Time：规定在过渡小狗开始之前需要等待的时间，以秒或毫秒计。

2、2D变形

transform字面上就是变形，改变的意思。
在CSS3中transform主要包括以下几种：
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

语法：transform：none | rotate |scale |skew |trans |ate |matix；
说明：
none：表示不进行变换；
可以同时对一个元素进行transform的多种属性操作，例如rotate、
scale、translate三种，单transform中使用多个属性时却需要有空格隔开。

旋转rotate
rotate（）：通过指定的角度参数对原元素指定一个2D rotate（2D旋转）
需要先有transform-origin属性的定义。

transform-origin定义的是旋转的基点，其中angle是指旋转角度，
如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示
逆时针旋转。
如：transform：rotate（30deg）

移动translate
移动translate我们分为三种情况：

translate（x，y）水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX（x）仅水平方向移动（X轴移动）
translateY（y）仅垂直方向移动（Y轴移动）
如：
transform：translate（100px，20px）
transform：translateX（100px）
transform：translateY（20px）

缩放scale
缩放scale和移动translate是极其相似，他也是具有三种情况：
scale（x，y）使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX（x）元素仅水平方向缩放（X轴缩放）
scaleY（y）元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放
中心点和基数，其中心点就是元素的中心位置，缩放基数为1
如果其值大于1元素就放大，反之其值小于1，元素缩小
如：
transform：scale（2,1.5）
transform：scaleX（2）
transform：scaleY（2）

扭曲skew
怒去skew和translate、scale一样同样具有三种情况：
skew（x，y）使元素在水平和垂直方向同时扭曲（X轴和Y轴
同时按一定的角度值进行扭曲变形）
skewX（x）仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY（y）仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
如：
transform：skew（30deg，10deg）
transform：skewX（30deg）
transform：skewY（10deg）

改变元素基点transform-origin
transform-origin主要作用是在进行transform动作之前可以改变元素
的基点位置，因为元素默认基点就是其中心位置，没有使用
transform-origin改变元素基点位置的情况下，transform进行的
rotate，translate，scale，skew，matrix等操作都是以元素自己
中心位置进行变化的
单有时候需要在不同的位置对元素进行这些操作，那么就可以使用
transform-origin来对元素进行基点位置改变，使元素基点不在是
中心位置，以达到需要的基点位置。

语法：transform-origin：x-axis y-axis
说明：
默认点是元素的中心点。
其中x和y的值可以是百分之，em，px，其中x也可以是字符参数值
left，center，right；Y和X一样除了百分值外还可以设置字符值
top，centerm，bottom，这个看上去有点像background-position设置一样