二十二、CSS3 之使用平面转换及渐变背景丰富网页效果和呈现方式（2）
平面转换 transform 是 2D 转换，可以改变盒子在平面内的形态，如 位移 、旋转 、缩放
平面转换是根据下面的 坐标轴 来移动或旋转的：
平面转换 - 位移
位移语法：transform:translate(水平移动距离,垂直移动距离)
移动距离 的取值可以是正数，也可以是负数；可以直接用 像素单位数值 表示，也可以用 百分比 来表示，百分比的参照物是盒子的 自身大小
在上述坐标轴中，X 轴正向为 右 ，Y 轴正向为 下
关于 translate 的值 ，如果只有一个值，则表示 X 轴 方向移动的距离
也可以给某个方向设置单独移动的距离，水平移动距离可以用 translateX() ；垂直移动距离可以用 translateY() 来表示
示例：鼠标移入父盒子，子盒子改变位置
<style>
.fa {
width: 200px;
height: 200px;
background-color: rgb(215, 215, 254);
}
.so {
width: 100px;
height: 100px;
background-color: rgb(249, 254, 215);
}
.fa:hover .so{
transform: translate(50px,30px);
}
</style>
<body>
<div class="fa">
<div class="so"></div>
</div>
</body>
在需要 盒子居中 项目中，通常使用 百分比 ，因为如果盒子大小改变，不用去修改移动距离，浏览器会根据设置的距离的百分数，自动调整
子绝父相配合移动实现子元素居中
能实现子元素居中效果，但是不易维护：
升级版方案：
下面是一个双开门的小例子，仅供娱乐
用两张图片，配合 CSS 做一个双开门效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
.box {
margin: 0 auto;
width: 520px;
height: 412px;
background-image: url(./01.png);
background-repeat: no-repeat;
}
.box::before,
.box::after {
content: '';
float: left;
background-image: url(./02.png);
background-repeat: no-repeat;
width: 50%;
height: 412px;
}
.box::after {
background-position: right 0;
}
.box:hover::before{
transform: translate(-100%);
}
.box:hover::after{
transform: translate(100%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
平面转换 - 旋转
平面 旋转 rotate(角度) ，角度的单位是 deg；如果取值为 正，顺时针 旋转，取值为 负 ，则 逆时针 旋转
<style>
.box {
margin: 0 auto;
width: 520px;
height: 412px;
transform: rotate(90deg);
}
</style>
<body>
<div class="box">
<img src="./01.png" alt="">
</div>
</body>
转换原点
转换原点语法： transform-origin:原点水平位置 原点垂直位置
它的取值有三种：
- 方位名词：left、top、right、bottom、center
- 像素单位数值
- 百分比：参照盒子自身尺寸计算
可以参照时钟记忆：
以右下角为原点，顺时针旋转 60°：
<style>
.box {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: lightblue;
}
.so {
width: 100px;
height: 100px;
background-color: yellow;
transform-origin: right bottom;
transform: rotate(60deg);
}
</style>
<body>
<div class="box">
<div class="so"></div>
</div>
</body>
多重转换
多重转换原理：
旋转会改变网页元素的 坐标轴向 ，先写旋转，则后面的转换效果的轴向以 旋转后 的轴向为准，会影响转换结果
多重转换写法推荐：transform: translate() rotate();
先平移，再旋转：
<style>
.box {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: lightblue;
}
.so {
width: 100px;
height: 100px;
background-color: yellow;
transform: translate(80px) rotate(45deg);
}
</style>
<body>
<div class="box">
<div class="so"></div>
</div>
</body>
先旋转，再平移：
<style>
.box {
margin: 0 auto;
width: 300px;
height: 300px;
background-color: lightblue;
}
.so {
width: 100px;
height: 100px;
background-color: yellow;
transform: rotate(45deg) translate(80px);
}
</style>
<body>
<div class="box">
<div class="so"></div>
</div>
</body>
平面转换 - 缩放
缩放 transform: scale(倍数); ，倍数大于 1 ，放大 ；倍数小于 1 ，缩小
<style>
div {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: lightblue;
}
.box:hover {
transform: scale(2); /* 放大 */
}
.so:hover {
transform: scale(0.5); /* 缩小 */
}
</style>
<body>
<div class="box"></div>
<div class="so"></div>
</body>
渐变背景
渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景
