10HTML+CSS

平面转换

平面转换 transform，作用：为元素添加动态效果，一般与过渡配合使用 ⚫ 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜） ⚫ 平面转换又叫 2D 转换 。

属性 ⚫ 取值 ◆ 像素单位数值 ◆ 百分比（参照盒子自身尺寸计算结果） ◆ 正负均可 ⚫ 技巧 ◆ translate() 只写一个值，表示沿着 X 轴移动 ◆ 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY() 平面转换 – 平移 transform: translate(X轴移动距离, Y轴移动距离);

属性 ◆ 角度单位是 deg ⚫ 技巧 ◆ 取值正负均可 ◆ 取值为正，顺时针旋转 ◆ 取值为负，逆时针旋转 平面转换 – 旋转 transform: rotate(旋转角度);

默认情况下，转换原点是盒子中心点 ⚫ 属性 ⚫ 取值 ⚫ 方位名词（left、top、right、bottom、center） ⚫ 像素单位数值 ⚫ 百分比 平面转换 – 改变转换原点 transform-origin: 水平原点位置 垂直原点位置;

多重转换原理：以第一种转换方式坐标轴为准转换形态 ➢ 旋转会改变网页元素的坐标轴向 ➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果 

属性 ⚫ 技巧 ⚫ 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放 ⚫ 取值大于1表示放大，取值小于1表示缩小 平面转换 – 缩放 transform: scale(缩放倍数); transform: scale(X轴缩放倍数, Y轴缩放倍数);

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景 ⚫ 分类 ⚫ 线性渐变 ⚫ 径向渐变 

属性 ⚫ 取值 ◆ 渐变方向：可选  to 方位名词  角度度数 ◆ 终点位置：可选  百分比 线性渐变 background-image: linear-gradient( 渐变方向, 颜色1 终点位置, 颜色2 终点位置, ...... );

作用：给按钮添加高光效果 ⚫ 属性 ⚫ 取值 ⚫ 半径可以是2条，则为椭圆 ⚫ 圆心位置取值：像素单位数值 / 百分比 / 方位名词 径向渐变 background-image: radial-gradient( 半径 at 圆心位置, 颜色1 终点位置, 颜色2 终点位置, ...... );