目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。
一、平面转换
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综合案例完整代码。完全免费，仅供学习参考使用。
