(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）
目录
平面转换
平面转换 transform
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换
平面转换 – 平移
属性
取值
◆ 像素单位数值
◆ 百分比（参照盒子自身尺寸计算结果）
◆ 正负均可
技巧
◆ translate() 只写一个值，表示沿着 X 轴移动
◆ 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
平移实现居中效果
方法一：
方法二：百分比参照盒子自身尺寸计算结果
平面转换 – 旋转
属性
◆ 角度单位是 deg
技巧
◆ 取值正负均可
◆ 取值为正，顺时针旋转
◆ 取值为负，逆时针旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; transition: all 2s; } img:hover { transform: rotate(360deg); } </style> </head> <body> <img src="./images/rotate.png" alt=""> </body> </html>
平面转换 – 改变转换原点
默认情况下，转换原点是盒子中心点
属性
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; border: 1px solid #000; transition: all 2s; transform-origin: right bottom; } img:hover { transform: rotate(360deg); } </style> </head> <body> <img src="./images/rotate.png" alt=""> </body> </html>
网页显示为：转动中心点为右下角
平面转换 – 多重转换
多重转换技巧：先平移再旋转
多重转换原理：以第一种转换方式坐标轴为准转换形态
➢ 旋转会改变网页元素的坐标轴向
➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
平面转换 – 缩放
属性
技巧
通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
取值大于1表示放大，取值小于1表示缩小
平面转换 – 倾斜
属性
取值
角度度数 deg
渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
分类
线性渐变
径向渐变
线性渐变
属性
取值
渐变方向：可选
to 方位名词
角度度数
终点位置：可选
百分比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .e { display: flex; } .a { width: 100px; height: 100px; background-image: linear-gradient( red, green); } .b { width: 100px; height: 100px; background-image: linear-gradient( to right, red , green ); } .c { width: 100px; height: 100px; background-image: linear-gradient( red 80%, green ); } .d { width: 100px; height: 100px; background-image: linear-gradient( 45deg, red , green ); } </style> </head> <body> <div class="e"> <div class="a">1</div> <div class="b">2</div> <div class="c">3</div> <div class="d">4</div> </div> </body> </html>
网页显示为：
径向渐变
作用：给按钮添加高光效果
属性
取值
半径可以是2条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词
