transform 平面转换（2d）

一、平移

原理: 使用transform属性实现元素的位移、旋转、缩放等效果。

语法: transform: translate(水平移动距离, 垂直移动距离)。

取值: 1.像素单位数值; 2.百分比（参照物为盒子自身尺寸）; 3.X轴正向为右，Y轴正向为下。

注意:

1.translate()如果只给出一个值,代表在X轴方向移动;

2.单独设置某个方向的移动距离：translateX() & translateY();

3.位移移动的百分比是自己的大小,x轴是自己的宽,y轴是自己的高;

4.位移在移动时不会影响其他的盒子,有类似相对定位的特点.

使用translate快速实现绝对定位的元素居中效果

原理: 位移取值为百分比数值，参照盒子自身尺寸计算移动距离。

二、旋转

原理： 使用rotate实现元素旋转效果。

语法: transform: rotate(deg);

1.取值为正, 则顺时针旋转;

2.取值为负, 则逆时针旋转;

注意：

1.先位移后旋转,使用transform复合位移属性的时候要先位移再旋转,如果先旋转,会造成坐标轴发生改变;

2.translate(-50%,-50%)实指再默认状态或者hover状态保持盒子居中

3.多重转换

原理：旋转会改变网页元素的坐标轴向，先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。

4.使用transform-origin属性改变转换原点

语法： transform-origin: 原点水平位置 原点垂直位置；

取值：1.方位名词（left、top、right、bottom、center）；2.像素单位数值；3.百分比（参照盒子自身尺寸计算）。

三、缩放

原理： 使用scale属性改变元素的尺寸。

语法：

1.transform: scale(x轴缩放倍数, y轴缩放倍数);一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放；

2.transform: scale(缩放倍数);scale值大于1表示放大, scale值小于1表示缩小；

3.transform: scale(1);1倍就是不变；

4.transform: scale(0.5); 1倍以下是缩小；

5.transform: scale(-0.5);负值:值小于-1是缩小,值大于-1是放大。

四、倾斜

原理： 使用skew属性改变元素的形状。

语法：

1.2d倾斜语法:transform:skew(deg)；skewX:水平倾斜； skewY:垂直倾斜；

2.角度不能设置为90deg；

3.向右倾斜取正值,向左倾斜取负值；

4.2d推荐综合写法:位移 旋转 缩放 倾斜 ；

transform: translatex(100px) rotate(0.5turn) scale(1) skew(60deg);

五、渐变

原理： 使用background-image属性实现渐变背景效果。渐变是多个颜色逐渐变化的视觉效果；一般用于设置盒子的背景。

注意： 1.linear-gradient:线性渐变；

2.radial-gradient：径向渐变；

方法一:

默认从上往下： background-image: linear-gradient(red, yellow);

方法二:

从左到右： background-image: linear-gradient(to right, red, blue);

方法三：

改变渐变色方向： background-image: linear-gradient(60deg, red, green);

方法四：

常用 透明色，黑色半透明渐变色： background-image: linear-gradient(transparent,rgba(0,0,0,.5));

方法五：

颜色的从内到外渐变： background-image: radial-gradient(pink, skyblue) ；