前端之移动web(一)

标签：web 转换 缩放 前端 transform 旋转 移动 取值 渐变

1.平面转换 transform ⚫ 作用：为元素 添加动态效果 ，一般与 过渡 配合使用 ⚫ 概念：改变盒子在 平面 内的 形态 （位移、旋转、缩放、倾斜） 平面转换又叫 2D 转换   一:平面转换 – 平移 ⚫ 属性 transform : translate (X 轴移动距离 , Y 轴移动距离 ); ⚫ 取值 ◆ 像素单位数值 ◆ 百分比（参照 盒子自身尺寸 计算结果） ◆ 正负均可 ⚫ 技巧 ◆ translate() 只写 一个值 ，表示沿着 X 轴移动 ◆ 单独设置 X 或 Y 轴移动距离： translateX() 或 translateY()   二:平面转换 – 旋转 ⚫ 属性 transform : rotate ( 旋转角度 ); ◆ 角度单位是 deg ⚫ 技巧 ◆ 取值 正负均可 ◆ 取值为 正 ， 顺 时针旋转 ◆ 取值为 负 ， 逆 时针旋转   三:平面转换 – 改变转换原点 ⚫ 默认情况下，转换原点是 盒子中心点 ⚫ 属性 transform-origin : 水平原点位置 垂直原点位置 ; ⚫ 取值 ⚫ 方位名词 （left、top、right、bottom、center） ⚫ 像素单位数值 ⚫ 百分比 平移实现居中效果 \   四: 平面转换 – 多重转换 多重转换技巧： 先平移再旋转 transform : translate () rotate (); 多重转换原理： 以第一种转换方式坐标轴为准转换形态 ➢ 旋转会改变网页元素的坐标轴向 ➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果     五: 平面转换 – 缩放 ⚫ 思考: 改变元素的width或height属性能实现吗？ ⚫ 属性 transform : scale ( 缩放倍数 ); transform : scale (X 轴缩放倍数 , Y 轴缩放倍数 ); ⚫ 技巧 ⚫ 通常，只为 scale() 设置 一个值 ，表示 X 轴和 Y 轴 等比例缩放 ⚫ 取值 大于1 表示 放大 ，取值 小于1 表示 缩小   六: 平面转换 – 倾斜 ⚫ 属性 transform : skew (); ⚫ 取值 ⚫ 角度度数 deg 2. 渐变 ⚫ 渐变是 多个颜色 逐渐变化的效果，一般用于设置 盒子背景 ⚫ 分类 ⚫ 线性渐变 ⚫ 径向渐变   一: 线性渐变 属性 background-image : linear-gradient ( 渐变方向 , 颜色 1 终点位置 , 颜色 2 终点位置 , ...... ); ⚫ 取值 ◆ 渐变方向： 可选 to 方位名词 角度度数 ◆ 终点位置： 可选 百分比 background-image : linear-gradient ( transparent, rgba(0, 0, 0, 0.6) );   二: 径向渐变 ⚫ 作用：给按钮添加 高光 效果 ⚫ 属性 background-image : radial-gradient ( 半径 at 圆心位置 , 颜色 1 终点位置 , 颜色 2 终点位置 , ...... ); ⚫ 取值 ⚫ 半径可以是 2条 ，则为 椭圆 ⚫ 圆心位置取值：像素单位数值 / 百分比 / 方位名词 3. 空间转换   空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间， Z 轴位置与视线方向相同。   空间转换也叫 3D转换   属性：transform

  一:空间转换 – 平移

属性 transform : translate3d (x, y, z); transform : translateX (); transform : translateY (); transform : translateZ (); 取值（ 正负 均可）    像素单位数值    百分比（参照 盒子自身尺寸 计算结果） 提示    默认情况下， Z 轴平移没有效果   二: 视距 perspective 作用： 指定了 观察者 与 Z=0 平面的 距离 ，为元素添加 透视效果 透视效果： 近大远小、近实远虚 属性： ( 添加给 父级 ，取值范围 800-1200 ) perspective : 视距 ;  三: 空间 – 旋转 transform: rotateZ(值); transform: rotateX(值); transform: rotateY(值); 左手法则 – 根据 旋转方向 确定取值 正负 :    左手 握住旋转轴, 拇指指向正值方向 , 其他四个手指 弯曲 方向为旋转 正值 方向 拓展    rotate3d(x, y, z, 角度度数) ：用来设置 自定义旋转轴的位置 及旋转的角度    x，y，z 取值为0-1之间的数字

标签：web,转换,缩放,前端,transform,旋转,移动,取值,渐变
From： https://blog.csdn.net/m0_72898512/article/details/143415524