Web进化——移动Web
1.平面转换transform
- 作用：为元素添加动态效果，一般与过渡配合使用
- 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
- 平面转换又叫2D转换
1.1 平面转换-平移
属性：
transform:translate(X轴移动距离，Y轴移动距离);取值：
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
- 正负均可
技巧：
- translate()只写一个值，表示沿着X轴移动
- 单独设置X或Y轴移动距离:translateX()或translateY()
1.2平面转换-旋转
属性
transform:rotate(旋转角度);- 角度单位是deg
技巧：
- 取值正负均可
- 取值为正，顺时针旋转
- 取值为负，逆时针旋转
1.3平面转换-改变转换原点
默认情况下，转换原点是盒子中心点
属性
transform-origin:水平原点位置，垂直原点位置;取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比
1.4平面转换-多重转换
多重转换技巧：先平移再旋转
transform:translate() rotate();.box{
width:800px;
height:200px;
border:1px solid #000;
}
img{
width:200px;
height:200px;
transition:all 1s;
border-radius: 100%;
}
.box:hover img{
transform: translate(600px) rotate(360deg);
}结果就是图片边平移边旋转
1.5平面转换-缩放
属性：
transform:scale(缩放倍数);
transform:scale(X轴缩放倍数,Y轴缩放倍数);原效果：
将鼠标放置图片上后：
1.6平面转换-倾斜
属性：
transform:skew();取值
- 角度读书deg
1.7渐变
渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
分类
- 线性渐变
background-image:linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
.......
}取值
- 渐变方向：可选
- 终点位置：可选径向渐变
- 径向渐变
作用：给按钮添加高光效果
属性
background-images:radius-gradient(
半径 at 圆心位置
颜色1 终点位置
颜色2 终点位置
........
};取值
- 半径可以是2条，则为椭圆
- 圆心位置取值：像素单位数值/百分比/方位名词
渐变综合案例
大致CSS部分代码
.box{
position: relative;
width: 300px;
height: 212px;
}
.box img{
width:300px;
height: 100%;
}
.box .title{
position: absolute;
left:15px;
bottom: 20px;
z-index: 2;
width:260px;
color:#fff;
font-size: 20px;
font-weight: 700;
}
.mask{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
opacity: 0;
transition: all 0.5s;
}
.box:hover .mask{
opacity: 1;
}效果（移动到图片上会产生渐变)
2.空间转换
空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间 Z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform
transform:translate3d(x,y,z);
transform:translateX();
transform:translateY();
transform:translateZ();因为没有在加视距的情况下，平面图形是无法看到Z轴的变化效果的，于是乎，下面就将介绍可以实现这个效果的方法。
2.1视距perspective
作用：指定了观察者与z=0平面的距离，为元素添加透视效果
透视效果：近大远小，近实远虚
属性：（添加给父级，取值范围800-1200）范围不能过小也不能过大，会影响视觉效果
perspective:视距;
移动到该盒子的时候，会有给人视距变化的感觉，有点类似变大变小，但是实际上是在空间中Z轴上的变化。
2.2空间—旋转
前提的前提必须有在父级视距的情况下，不然空间上的变化是看不出来的。
- transform:rotateZ(值);
以视线为Z轴，对照图片的中心点进行Z轴上的旋转，感觉与平面旋转的效果有点类似。
- transform:rotateX(值);
以空间X轴上旋转，就会出现类似笔记本翻开的视觉效果。
- transform:rotateY(值);
以空间Y轴旋转，就会出现以上效果。
左手法则 —— 根据旋转方向确定取值正负（用于判断图片朝哪个方向旋转）
左手旋转握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。
- 拓展
rotate3d(x,y,z,角度度数）：用来设置自定义旋转轴位置及旋转的角度
x,y,z取值为0-1之间的数字
2.3空间转换—缩放
属性
transform:scale3d(x,y,z);
transform:scaleX();
transform:scaleY();
transform:scaleZ();可以实现空间立体图形的放大缩小，可以定位到每个轴上的放大缩小
3.立体呈现 - transform-style
作用：设置元素的子元素是位于3D空间中还是平面中
属性名:transfom-style
属性值：
- flat:子级处于平面中
- preserve-3d:子级处于3D空间
呈现立体图形步骤
- 父元素添加transform-style:preserve-3d;
- 子级定位
- 调整盒子的位置（位移或旋转）
一下是自己小小做的一个立体旋转的盒子css部分源代码
.cube{
position: relative;
width: 200px;
height: 200px;
margin:100px auto;
/* background-color: pink; */
transition: all 2s;
transform-style: preserve-3d;
}
.cube div{
position: absolute;
left:0;
top:0;
width:200px;
height:200px;
}
.front{
background-color: orange;
transform: translateZ(100px);
}
.zuo{
background-color: pink;
transform:translateX(-100px) rotateY(90deg);
}
.you{
background-color: blue;
transform:translateX(100px) rotateY(90deg);
}
.back{
background-color: green;
transform: translateZ(-100px);
}
.cube:hover{
transform: rotateY(-90deg);
}立体图形旋转
综合案例实现3D导航
HTML部分（很简单的盒子处理）
CSS部分
li{
list-style: none;
}
.nav ul{
display: flex;
}
.nav li{
position: relative;
width:100px;
height:40px;
line-height: 40px;
transition: all 0.5s;
transform-style: preserve-3d;
}
.nav li a{
position: absolute;
display:block;
width:100%;
height:100%;
text-align: center;
text-decoration: none;
color:#fff;
}
/* 立方体每个面都有独立的坐标面，互不影响 */
.nav li a:first-child{
background-color: green;
transform: translateZ(20px);
}
.nav li a:last-child{
background-color: orange;
transform: rotateX(90deg) translateZ(20px);
}
.nav li:hover{
transform:rotateX(-90deg);
}最终效果视频
3D导航案例