2D平面转换
目标：使用transform属性实现元素的位移、旋转、缩放等效果
平面转换 Ø 改变盒子在平面内的形态（位移、旋转、缩放） Ø 2D转换
1，translate(位移)
目标：使用translate实现元素位移效果
语法：transform: translate(水平移动距离, 垂直移动距离)
取值（正负均可） Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸） 注意：X轴正向为右，Y轴正向为下
注意点 Ø translate()如果只给出一个值, 表示x轴方向移动距离 Ø 单独设置某个方向的移动距离：translateX() & translateY()
背景图位置
background-position: 方位（left,top）；
left：向左侧移动自身宽度 right：向右侧移动自身宽度
2，rotate(旋转)
目标：使用rotate实现元素旋转效果
1，语法：transform: rotate(角度); 角度单位是deg，一定要加单位
transform: rotate(45deg); /*表示顺时针旋转45度*/
取值正负均可 Ø 取值为正, 则顺时针旋转 Ø 取值为负, 则逆时针旋转
默认情况下所有的元素都是围绕着Z轴来旋转的，配合perspective：200px使用
transform: rotateX(45deg); 表示绕x轴旋转
transform: rotateY(45deg);表示绕y轴旋转
2，转换旋转原点：transform-origin
默认情况下所有的元素都是以自己的中心点作为参考点旋转的，
我们可以通过形变中心点transform-origin的 属性来修改它的参考点
3，transform-origin（0px 0px）；
第一个参数表示水平方向距离，第二个参数表示垂直方向距离
默认圆点是盒子中心点 transform-origin: 原点水平位置 原点垂直位置;
4，取值 Ø 方位名词（left、top、right、bottom、center）
transform-origin: center center;
Ø 像素单位数值
transform-origin；（0px 0px）;
Ø 百分比（参照盒子自身尺寸计算）
transform-origin：（50% 50%）； 表示宽的50%，长度的50%，即回到原来的中心点；
6，transform复合属性
目标：使用transform复合属性实现多形态转换
注意点：
1.如果需要进行多个转换，那么用空格隔开；
2.旋转会改变网页元素的坐标轴向 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
故先写平移，后写旋转；
img {
transform: translate(600px) rotate(720deg); 属性之间用空格隔开
}
3，scale(缩放)
目标：使用scale改变元素的尺寸
语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
1，第一个参数表示水平方向缩放，第二个参数表示垂直方向缩放；
2，水平，垂直缩小取值一致，只需要写一个值；
3，scale值大于1表示放大, scale值小于1表示缩小
transform: scale(2,0.5); 水平方向变为原来2倍，垂直方向为原来一半
渐变
目标：使用background-image属性实现渐变背景效果
场景：渐变是多个颜色逐渐变化的视觉效果 一般用于设置盒子的背景
background-image: linear-gradient(#e05e2f, #ea745e); 实现背景色渐变效果
注意点：
1，渐变没有过渡效果；
2，背景图片 没有渐变效果 并不完善(浏览器支持不够好)
就想要实现 鼠标移入 图片切换的渐变过程：
div里面包装两个图片标签，先让一个图片隐藏 一个显示，
div hover 再让另外一个图片隐藏，另一个图片显示，
定位（两图片重叠），加透明度来实现 因为透明度有过渡
线性渐变（linear-gradient）
1.默认值
background: linear-gradient(red,green); 由上向下(默认值)
2.通过方位名词决定渐变方向
由下向上：
background: linear-gradient(to top,red,green); 由下向上：
向右上方：
background: linear-gradient(to top right,red,green); 向右上方
通过角度：
background: linear-gradient(0deg,red,green);
（时钟指针类似：0度方向，即垂直向上，90度为水平向右，180度为水平向下，270度为水平向左...）
3.注意点：
1.最少需要传递2个颜色，但没有上限；
background: linear-gradient(to top, red, green，blue，yellow..);
2.渐变分为两部分，纯色部分和渐变色部分, 表示红色的纯色范围为100像素；
background: linear-gradient(to top, red 100px,green);
3.纯色与渐变色区域划分
background: linear-gradient(to top, red 100px,green 200px，....);
表示从上一个纯色结束100px的位置开始，到200px这个范围都是渐变色； 后面如此类推，只有第一个值是纯色范围，后面的都是表示渐变色范围
4.transparent(透明色)
将文字颜色设置为透明色， color: transparent;
4.径向渐变(radial-gradient)
1.默认值，由内向外；
background: radial-gradient(red,green);
2.由左上方向四周
background: radial-gradient(at top left,red,green);
3.通过具体像素指定扩散方向 （从水平方向200，垂直方向100的地方为中心点向四周扩散）
background: radial-gradient(at 200px 100px,red,green);
4.指定扩散范围 （表示以半径为100px的范围向四周扩散）
background: radial-gradient(100px,red,green);
5.既要指定扩散位置，又要指定扩散范围：
background: radial-gradient(100px at 200px 100px,red,green);
3D空间转换
空间转换也叫3D转换
空间：是从坐标轴角度定义的。
x 、y 和z三条坐标轴构成了一个立体空间，
z轴位置与视线方向相同（默认情况下看不到z轴变化）
1，透视:perspective
使物体近大远小，近清楚远模糊
语法：
perspective：透视距离；
透视距离：人的眼睛到被观察物体的距离
取值：像素单位数值， 数值一般在800 – 1200。
如：perspective:500px 说明观察物体的距离为500像素
注意点：
1.像素越小，近大远小效果越强；相反就越弱
2.设置perspective透视属性后，可以看到z轴
但透视属性必须添加到给需要呈现近大远小效果的元素的父级元素添加
3.使用perspective透视属性不能呈现立体图形
perspective只增加近大远小、近实远虚的视觉效果
2，translate元素空间位移
transform: translate3d(x, y, z); ltransform: translateX(值); transform: translateY(值); transform: translateZ(值);
取值（正负均可） 像素单位数值 百分比
注意：X轴正向为右，Y轴正向为下
3，rotate元素空间旋转
transform: rotateZ(值); transform: rotateX(值); transform: rotateY(值);
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
矢量，两点可以确定方向
判断旋转方向:
左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
4，scale元素空间缩放
transform: scaleX(倍数); transform: scaleY(倍数); transform: scaleZ(倍数); transform: scale3d(x, y, z);
5，呈现立体图形
transform-style: preserve-3d
呈现立体图形步骤
1.给盒子父元素添加transform-style: preserve-3d；
2.按需求设置子盒子的位置（位移或旋转）
flat 默认值
当我们想要做一个立体图形的时候，需要给容器设置一个开启立体空间的属性
谁需要开启立体空间，就赋值在哪里
注意点：
空间内，转换元素都有自已独立的坐标轴，互不干扰
