目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。
一、平面转换
1、简介
作用：为元素添加动态效果，一般与过渡配合使用。
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）。
平面转换也叫 2D 转换，属性是 transform。
2、平移
transform: translate(X轴移动距离, Y轴移动距离);
-
取值
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可，正值：向左、向下；负值：向右、向上
-
技巧
- translate() 只写一个值，表示沿着 X 轴移动
- 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()
练习：定位居中
- 方法一：margin-left, margin-top 设置为负值
- 方法二：使用 transform 向左向上移动自身尺寸的一半
<head><style>.box {background-color: pink;position: absolute;left: 50%;top: 50%;/* 方法一: margin-left, margin-top 设置为负值 *//* margin-left: -100px;margin-top: -50px; *//* 方法二: 使用 transform 向左向上移动自身尺寸的一半 */transform: translate(-50%, -50%);width: 200px;height: 100px;}</style>
</head><body><div class="box"></div>
</body>
3、旋转
transform: rotate(旋转角度);
-
取值：角度单位是 deg
-
技巧
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转
4、转换原点
默认情况下，转换原点是盒子中心点。可以通过 transform-origin 修改转换原点位置。
transform-origin: 水平原点位置 垂直原点位置;
- 取值：
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比
5、多重转换
同时使用平移和旋转，实现下面效果：
transform: translate() rotate();
技巧：要先平移再旋转
多重转换原理：以第一种转换方式的坐标轴为准
（1）旋转会改变网页元素的坐标轴向
（2）先写旋转， 则后面的平移效果的坐标轴以旋转后的坐标轴为准，旋转时坐标轴在不停的变化，平移额方向也在不停的变化
错误案例：先写旋转，再写平移，效果如下：
<head><title>多重转换</title><style>.box {margin-left: 600px;margin-top: 500px;width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 5s;}/* 鼠标移入box，图片边走边转 */.box:hover img {/* 先平移再旋转 */transform: translate(600px) rotate(360deg);/* 错误: 先旋转再平移 *//* 旋转会改变坐标轴向 *//* 多重转换：以第一种转换形态的坐标轴为准 *//* transform: rotate(360deg) translate(600px); *//* 层叠性 *//* 分开写也不行, 后面的转换效果会覆盖前面的转换效果 *//* transform: translate(600px);transform: rotate(360deg); */}</style>
</head><body><div class="box"><img src="./images/tyre1.png" alt="" /></div>
</body>
6、缩放
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
- 技巧
- 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
- 取值大于1表示放大，取值小于1表示缩小
7、倾斜
transform: skew();
- 取值：角度度数 deg
<head><title>倾斜效果</title><style>body {background-color: #eee;}div {margin: 100px auto;width: 100px;height: 200px;background-color: pink;transition: all 0.5s;}div:hover {transform: skew(30deg);/* transform: skew(-30deg); */}</style>
</head><body><div></div>
</body>
二、渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景。
分类：
- 线性渐变
- 径向渐变
1、线性渐变
background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);
取值：
-
渐变方向：可选，如果不写方向，默认是从上向下，即 to bottom 或 180deg
- to 方位名词，to right，to bottom…
- 角度度数，0deg，90deg，180deg…
-
终点位置：可选
- 百分比，这个颜色所占的比例，如果不写，默认是几个颜色平分
<head><title>线性渐变</title><style>body {background-color: #eee;}div {margin-left: 100px;margin-top: 100px;width: 200px;height: 200px;/* 设置了渐变色, 就是设置了 background-image, 背景色被覆盖, 除非渐变色设置透明 transparent */background-color: yellow;/* 默认从上到下的方向 */background-image: linear-gradient(red,transparent);background-image: linear-gradient(to right,red,green);/* 使用角度, 0deg 是从下向上开始, 正值顺时针旋转, 90deg 从左到右 */background-image: linear-gradient(0deg,red,green);/* 属性一样， 最后写的会覆盖前面的属性 *//* 默认从上向下, 红色占比 80% */background-image: linear-gradient(red 80%,green);}</style>
</head><body><div></div>
</body>
设置了渐变色，就是设置了 background-image，背景色会被覆盖，除非渐变色设置了透明 transparent。
2、径向渐变
background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);
取值：
- 半径可以是 2 条，则为椭圆
- 圆心位置取值：像素单位数值 / 百分比 / 方位名词
- 超过半径的区域显示渐变色设置的最后一个颜色值
- 如果想要超过半径的区域显示背景色，可以将最后一个颜色设置为透明色 transparent
三、综合案例
使用今日所学的平面转换和渐变色，实现下面网页中的特效。
想要完整代码的，点击这里获取Day10综合案例完整代码。完全免费，仅供学习参考使用。
