一、平面转换2D (一)什么叫平面转换：transform-位移、旋转、缩放、渐变 1、位移(transfrom) (属性值)translate (取值)有两种1.百分比 50% 2.像素单位取值10px 2、总结技巧，如果transform：translate(300px)只仅仅取一个值得时候，就会出现只仅仅沿着X轴移动。 transfrom：translateX/Y时候，只仅仅沿着其中一个轴移动，这里要强调一点，css样式具有层叠性，所以不要分开写。 二、旋转rotate 1.transfrom：rotate（角度）单位deg------可取正值，顺时针转动 --------负值，逆时针转动 注-- 默认的旋转原点是水平，垂直的居中的点 2.默认的旋转点可以更改-----transfrom-origin(加给需要更改的元素本身）=====可取值方位名词（最常用）====left top right bottom center ====像素单位 ====百分比 需求：以下代码更改是鼠标悬停时候更改旋转原点
三、多重转换transfrom复合属性
div { transform: translate(600px) rotate(360deg); }注意点：1.transform做复合属性，做多重转换不能分开写，后面的会层叠前面的。 2.如果将复合属性颠倒写出来，将rotate写在translate前面会出现旋转会修改元素平面轴的方向，所以多重转换不要写在前面。 /* 注意点：1.要做复合属性，多重转换不能分开写，后面的属性会覆盖后面的 2.要先写位移，在写旋转，因为旋转会修改元素平面轴的方向，所以在多重转换时候，不要先写旋转，要 先写位移 / / 复合属性 */ transform: translate(600px) rotate(360deg); 四、缩放scale（X轴 Y轴的放大倍数） 对于transfrom:scale总结 1、只给scale一个值，表示X轴Y轴等比例缩放 2、scale取值====大于1表示放大 ======等于1表示不放不缩 ======0~1表示缩小
五、渐变linear-gradient background-image:linear-gradient( 颜色1， 颜色2， 颜色3........) 多个颜色逐渐变化的视觉效果 一般用于设置盒子效果 注意1.取值 transparent透明======ragb(0,0,0,0.5==透明度) 2.透明度 opacity
