2D&3D 旋转与动画
一.字体图标
然后引入样式表，字体样式表是iconfont.css
接着调用类名 class=“iconfont xxx”,xxx是想用的图标的类名，iconfont类规定了一些样式，可自定义修改
二.平面转换
1.概念
改变盒子在平面内的形态(位移、旋转、缩放)
2D转换
平面转换属性
transform
2.位移
语法：
transform:translate(水平移动距离，垂直移动距离)
取值(正负均可)：
像素单位数值
百分比(参照物为盒子自身尺寸)
注意：x轴正向为右，y轴正向为下
技巧：
translate()如果只给出一个值，表示x轴方向移动距离
单独设置某个方向的移动距离：translateX( )&translateY( )
位移-绝对定位居中：transform(-50%,-50%)
3.旋转
语法
transform: rotate(角度)
角度单位是deg
技巧：取值正负均可
transform:rotate(360deg)
测试旋转必须有过渡属性
转换原点
语法：
默认原点是盒子中心点
transform-origin:原点水平位置 原点垂直位置
取值：
方位名词(left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)
多重转换技巧
transform: translate() rotate()
这样是边走边转
如果两个写反的话，x轴不断变换，会转七八糟的
如果分开写的话，会有层叠效果，下面的会替代上面的
4.缩放
transform: scale(x 轴缩放倍数，y轴缩放倍数)
技巧：
一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
transform: scale(缩放倍数)
5.渐变
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
background-image: linear-gradient(
颜色1,
颜色2
)
三.空间转换
1.简介
空间：是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform
语法：
transform:translate3d(x,y,z)
transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)
取值（正负均可）
像素单位数值
百分比
2.透视
默认情况下无法观测到Z轴位移效果
Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
属性(添加给父级)
perspective:值
取值：像素单位数值，数值一般在800-1200
3.空间旋转
语法：
transform: rotateZ(值)
transform: rotateX(值)
transform: rotateY(值)
判断旋转方向
左手法则：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
拓展
rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
x，y，z取值为0-1之间的数字
4.立体呈现
实现方法：
添加 transform-stytle:preserve-3d;
使子元素处于真正的3d空间
步骤：
1.盒子父元素添加transform-stytle:preserve-3d
2.按需求设置盒子的位置(位移或旋转)
5.空间缩放
语法：
transform:scaleX(倍数)
transform:scaleY(倍数)
transform:scaleZ(倍数)
transform:scale3d(x,y,z)
四.动画
1.和过渡的区别
过渡：实现2个状态之间的变化过程
动画效果：实现多个状态间的变化过程，动画可过程控制（重复播放、最终画面、是否暂停）
2.相关概念
动画的本质是快速切换大量图片在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
3.实现步骤
1.定义动画
@keyframes 动画名称{ //完成两个状态之间的变化
from{}
to{}
}
或
@keyframes 动画名称{ //多个状态，百分比指的是动画总时长的占比
0%{}
10%{}
15%{}
100%{}
}
2.使用动画
animation:动画名称 动画花费时长
4.动画属性
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
注意：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
animation:名称 时长 infinite(无限循环，重复次数的关键词) alternate(有正有反)
测试执行完毕时状态，要去掉重复次数和动画方向，backwards是默认值，动画停留在最初状态，一般加forwards，动画停留在结束状态
5.属性总结
animation-name(动画名称)
animation-duration(动画时长)
animation-delay(延迟时间)
animation-fill-mode(动画执行完毕状态): forwards:最后一帧状态，backwards:第一帧状态
animation-timing-function(速度曲线):steps(数字):逐帧动画
animation-iteration-count(重复次数):infinite:无限循环
animation-direction(动画执行方向):alternate:反向
animation-play-state(暂停动画):paused:暂停，通常配合:hover使用
animation:
动画1,
动画2,
;
