平面转换 （笔记）

平面转换的属性：transform

平面转换的运动有位移、旋转、缩放。

平面坐标轴特点：X轴和Y轴，X轴中向右为正，向左为负；Y轴中向下为正，向上为负。

一、位移

属性为：transform：translate（xpx，ypx）px为单位

取值（正负均可）

    1.像素单位数值。

    2.百分比（参照物为盒子自身尺寸）

translate（）如果只给一个值，表示X轴方向移动。

单独设置某个方向的移动距离：X轴：translateX（）

                                                   Y轴：translateY（）

二、旋转

属性为：transform：rotate（角度）单位为deg

取值（正负均可）

        正数顺时针转

        负数逆时针转

注：有过渡才能看到效果

三、转换原点

属性为：transform-origin

默认原点为盒子中心点

transform-origin：水平位置   垂直位置

取值：方位名词（left、top、right、bottom）

           像素单位数值

           百分比

四、多重转换

写法：transform：translate（px）   rotate（deg）；

注意：最好位移写前面，旋转写后面，因为旋转会改变X轴和Y轴的方向。

五、缩放

属性为：transform：scale（x，y）

x和y表示为缩放倍数，x和y没有单位，x和y大于一放大，小于一缩小。

一般情况下只为scale设置一个值，表示X轴和Y轴等比例缩放。（属性为：transform：scale（x））

六、渐变背景

属性为：backgrounde-image：linear-gradient（

                                                                                颜色一，

                                                                                颜色二，

                                                                                。。。。

                                                                                ）；

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景。