CSS中变形效果-transform（平移、旋转、缩放、倾斜）

CSS3实现变形的优势

1、无需加载额外的文件。
2、提高了网页开发者的工作效率。
3、提高了页面的执行速度。
在 CSS3 之前，如果需要为页面设置 变形效果 ，需要依赖于 图片、Flash或JavaScript 才能完成。 CSS3 出现后，通过 transform属性 就可以实现 变形效果。 2012年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：背面是不可见的。

5、3D转换方法（位移，缩放）

方法名称	描述
translate3d(x,y,z)	定义3D位移
translateX(x)	定义3D位移，仅使用用于 X 轴的值
translateY(y)	定义3D位移，仅使用用于 Y 轴的值
translateZ(z)	定义3D位移，仅使用用于Z 轴的值
scale3d(x,y,z)	定义 3D 缩放
scaleX(x)	定义 3D 缩放，通过给定一个 X 轴的值
scaleY(y)	定义 3D 缩放，通过给定一个 Y 轴的值
scaleZ(z)	定义 3D 缩放，通过给定一个 Z 轴的值

兼容性