CSS3绘图与动画

<meta http-equiv="X-UA-Compatible" content="ie=edge">

1、CSS3-2D转换属性：transform

CSS3 允许您使用 2D 转换来对元素进行格式化。

可以利用transform功能来实现文字或图像的变形处理.

转换类型

1) rotate:旋转

用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。默认参照中心点

2) translate:位移

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

参数表示移动距离，单位px，一个参数时：表示水平方向的移动距离；两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

3) skew：扭曲/倾斜

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg 一个参数时：表示水平方向的倾斜角度；两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

4) scale：缩放

用法：transform：scale(0.8),

参数：表示放大或缩小的倍数，某些浏览器不兼容分数形式如:1/2

注：其作用相当于将元素当成一个图片，整体放大，包括边框

注：一个定位若不加left及top则在原位置

4)matrix：混合 http://blog.csdn.net/flqbestboy/article/details/78110019

用法：transform:matrix(1,0,0,1,-200,-200);

matrix(n,n,n,n,n,n),定义 2D 转换，使用六个值的矩阵。

下面说明该6个参数的值：

将6个参数分别定义为a,b,c,d,e,f

如果e和f不为0，则表示该内容需要进行位移，即：

1 0 x

0 1 y

0 0 1

如果6个参数的形式为(a,0,0,d,e,f)

则表示该内容要进行缩放，a表示在X轴上缩放的比例，d表示在Y轴上缩放的比例

x 0 0

0 y 0

0 0 1

如果6个参数的形式为(a,b,c,d,e,f)，并且a,b,c,d都小于1，且a=c,b=-d;

则表示该内容要进行旋转，设定旋转角度为t,则6个参数的值为(cost,sint,-sint,cost,e,f),所以一般见到前4个参数都为小于1的，

且b和c为相反数的，即为旋转角度

cos(x) -sin(x) 0

sin(4) cos(x) 0

0 0 1

如果6个参数的形式为(a,b,c,d,e,f),并且b,c都小于1，而a,d都等于1

则表示需要拉伸，设定拉伸角度为tx和ty,则6个参数的值为(1,tanθy,tanθx,1,e,f),注意第2个参数和第3个参数分别代表的意义

θx表示x轴倾斜的角度，θy表示y轴，两者并无关联

1 tan(y) 0

tan(x) 1 0

0 0 1

手机（retina）dpr：

某些安卓机不支持像素小于1的尺寸，

手机一像素问题？？

转换基准点：transform-origin

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

    用法：transform-origin: 10px 10px;

    共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

    两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

过渡效果：transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    规定您希望把效果添加到哪个 CSS 属性上

    规定效果的时长

    用法：transition: all 1s 2s linear;

获取贝塞尔方法工具贝塞尔曲线用法 http://cubic-bezier.com/#.17,.67,.83,.67

transition-timing-function:cubic-bezier(.17,.67,.93,.78);

2、CSS3-3D转换属性：transform

CSS3 允许您使用 3D 转换来对元素进行格式化。

transform-style属性

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。transform-style: flat | preserve-3d

transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。

perspective属性

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。

其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

在3D变形中，对于某些变形，例如下面的示例演示的沿Z轴的变形，perspective属性对于查看变形的效果来说必不可少

用法：perspective：none |

perspective属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值接受一个长度单位大于0的值。而且其单位不能为百分比值。值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。

perspective也可以设置在transform属性中 transform: perspective(600px);

比较：

perspective属性可以取值为none或长度值；而perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间；

perspective属性用于变形对像父元素；而perspective()函数用于变形对像自身，并和transform其他函数一起使用。

transform属性

三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：

3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

其基本语法如下：

        translate3d(tx,ty,tz) 扑克牌translate3D效果

        tx：代表横向坐标位移向量的长度；

        ty：代表纵向坐标位移向量的长度；

        tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；

其基本语法如下：

        rotate3d(x,y,z,a) 扑克牌rotate3D效果展示

        x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

        y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

        z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

        a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

其基本语法如下：

        scale3d(sx,sy,sz) 扑克牌scale3D效果

        sx：横向缩放比例；

        ysy：纵向缩放比例；

        z sz：Z轴缩放比例；

scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果

3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

CSS3中的3D矩阵要比2D中的矩阵复杂的多了，从二维到三维，是从４到９；而在矩阵里头是3*3变成4*4，９到16了。话说又说回来，对于3D矩阵而言，本质上很多东西都与2D一致的，只是复杂程度不一样而已。 3D矩阵即为透视投影，推算方法与2D矩阵类似：

代码表示就是：

matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

注：支持投影：-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%);

3、关键帧动画

@keyframes 规则用于创建动画

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%,0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器

必须设置的项：

规定动画的名称

规定动画的时长

@keyframes test{

    from{}

    to{}

  }

@keyframes test{

    0%{}

    50%{}

    ......

    100%{}

  }

animation:test 2s both

解决Chrome动画”卡顿”的办法

http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

　　为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。

　　这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。

当然也可以这样开启所有浏览器的GPU硬件加速：

webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

或

webkit-transform: translate3d(0,0,0);

-moz-transform: translate3d(0,0,0);

-ms-transform: translate3d(0,0,0);

-o-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);