CSS中变形效果-transform（平移、旋转、缩放、倾斜）
CSS3实现变形的优势2-D变形平移translate（）1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin 3-D变形1、旋转rotate3d()2、视距perspective3、transform-style（用于保存元素的3D 空间）4、backface-visibility（定义元素在不面对屏幕时是否可见5、3D转换方法（位移，缩放） 兼容性CSS3实现变形的优势
1、无需加载额外的文件。
2、提高了网页开发者的工作效率。
3、提高了页面的执行速度。
在 CSS3 之前，如果需要为页面设置 变形效果 ，需要依赖于 图片、Flash或JavaScript 才能完成。 CSS3 出现后，通过 transform属性 就可以实现 变形效果。 10月， W3C 组织发布了CSS3变形工作草案，这个草案包括了 CSS3 2D变形和CSS3 3D变形 。
变形效果：
CSS3的变形 transform）属性 （可以让元素在一个坐标系统中变形。）
基本语法格式：
transform：none | transform-functions;
transform属性 的默认值为 none ，适用于 内联元素和块元素 ，表示 不进行变形 。transform-function用于设置 变形函数 ，可以是一个或多个 变形函数 列表。
2-D变形
平移translate（）
使用translate（）方法能够重新定义元素的坐标，实现平移的效果。
基本语法格式：
transform:translate（x-value,y-value）;
x-value 指元素在 水平方向 上移动的距离， y-value 指元素在 垂直方向 上移动的距离。如果 省略了第二个参数 ， 则取默认值0 。当值为 负数 时，表示 反方向移动 元素。
平移示意图：
1、缩放scale()
scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。
基本语法格式：
transform:scale(x-axis,y-axis);
x-axis 和 y-axis 参数值可以是 正数、负数和小数 。 正数值 表示基于指定的宽度和高度 放大 元素。 负数值 不会缩小元素，而是 反转 元素（如文字被反转），然后再 缩放 元素。如果 第二个参数省略 ，则第二个参数等于第一个参数值。
缩放示意图：
2、倾斜skew()
skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。
基本语法格式：
transform:skew(x-angle,y-angle);
参数 x-angle 和 y-angle 表示角度值，第一个参数表示相对于 X轴进行倾斜 ，第二个参数表示相对于 Y轴进行倾斜 ，如果 省略了第二个参数 ，则取默认值0。
倾斜示意图：
3、旋转rotate()
rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。
基本语法格式：
transform:rotate(angle);
参数 angle 表示要旋转的 角度值 。如果角度为 正数值 ，则按照 顺时针 进行旋转，否则，按照逆时针旋转。
旋转示意图：
4、中心点transform-origin
变形操作 都是以元素的 中心点 为基准进行的，如果需要改变这个中心点，可以使用 transform-origin属性 。
基本语法格式：
transform-origin: x-axis y-axis z-axis;
transform-origin属性 包含三个参数，其默认值分别为 50% 50% 0 ，各参数的具体含义如下：
3-D变形
1、旋转rotate3d()
基本语法格式：
rotate3d(x,y,z,angle);
x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。
2、视距perspective
perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。
基本语法格式：
perspective:参数值;
perspective 属性参数值可以为 none 或者数值（一般为 像素 ），其透视效果由参数值决定，参数值越小，透视效果越突出。
3、transform-style（用于保存元素的3D 空间）
flat：子元素将不保留其 3D 位置。（默认属性）
preserve-3d子元素将保留其 3D 位置。
4、backface-visibility（定义元素在不面对屏幕时是否可见
）
visible：背面是可见的。
hidden：背面是不可见的。
