移动Web-02****
移动Web -04空间转换****
一.3D坐标系(左手原则)
X 轴 往右越大，是正值， 否则反之
Y 轴 往下越大，是正值，否则反之
Z轴 （指向我们）越大，是正值，否则反之
二.3D位移
语法: transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）:像素单位数值 百分比
/* 3d位移 单独写法 */
/* x轴:右正 左负 */
/* transform: translateX(100px); */
/* transform: translateX(-100px); */
/* Y轴:上负 下正 */
/* transform: translateY(100px); */
/* transform: translateY(-100px); */
/* Z轴:面向于自己的方向为正值 面向于自己的反方向负值 */
/* transform: translateZ(100px); */
/* transform: translateZ(-500px); */
/* 3d位移 综合写法 */
/* 语法:transform: translate3d(x轴, y轴, z轴); */
transform: translate3d(100px, 200px, -400px);
三. 透视
/* 透视 推荐值:800-1200px */
/* 透视:一般推荐给父元素添加 */
/* 透视的作用:进大远小,近实远虚的效果,查看z轴需要添加透视 */
/* 透视的值越小,眼睛到屏幕的距离就越小,你看到的物体就变大 */
/* 透视的值越大,眼睛到屏幕的距离就越大,你看到的物体就变小 */
/* 注意:透视和3d没有关系 */
perspective: 800px;
三-1.透视的BUG
/* 透视 */
/* 问题:透视默认中心点在屏幕中间,如果内容不在盒子中间则会出现倾斜现象 */
/* 解决方法:把内容放在屏幕中间 */
text-align: center;
四.3D旋转
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
/* 3D x轴 rotate 单位 deg度 turn圈 */
/* x轴正值从上往下旋转 负值从下往上 */
/* transform: rotateX(-180turn) scale(1.8); */
/* y轴正值从左往右旋转 负值从右往左 */
/* transform: rotateY(-180deg); */
/* z轴正值顺时针旋转 负值逆时针旋转 */
/* transform: rotateZ(-180deg); */
/* 3D旋转子综合写法了解：transform: rotate3d(x，y，z，角度)； */
/* x，y，z只能取0和1 0表示不围绕这个坐标旋转 1表示围绕这个坐标旋转 */
transform: rotate3d(0,1,1,60deg);
注意：默认的旋转中心在盒子的中心位置。
五.立体呈现
/* 开启3D */
transform-style: preserve-3d;
盒子父元素添加transform-style: preserve-3d；
六. 空间缩放
语法: transform: scaleX(倍数);
`transform: scaleY(倍数);`
`transform: scaleZ(倍数);`
`transform: scale3d(x, y, z);`
/* 3d缩放 单属性值写法 取值1以下缩小 1以上放大 1表示不变 也可以设置负值 */
/* scaleX 可以理解为盒子的宽 */
/* transform: scaleX(2); */
/* scaleY 可以理解为盒子的高 */
/* transform: scaleY(3); */
/* scaleZ 可以理解为面向自己的方向进行放大,需要把盒子进行旋转 */
/* transform: scaleZ(3) rotateX(90deg); */
/* 缩放的综合写法:transform: scale3d(x, y, z); 值为倍数 */
transform: scale3d(2, 2, 2);
移动Web -05动画****
一. 补间动画
1. 定义动画
/* 1.定义动画 */
@keyframes move(动画名称) {
/* 开始状态from 如果原点取值为0可以省略*/
form {
transform: translate(0, 0);
}
/* 结束状态to */
to {
transform: translate(800px, 0);
}
}
或者
@keyframes move(动画名称) {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(600px, 600px);
}
100% {
transform: translate(0, 0);
}
}
2. 调用动画
/* 2.调用动画 animation:动画名 动画执行时间*/
animation: move 2s;
二. 动画的属性
animation:动画名称 动画时常 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
动画的属性：（animation:）
动画名字
动画执行时间
动画速度(linear匀速)
动画的延迟时间（单位：s）
动画的循环次数（infinite无限循环）
动画的方向（alternate反向执行）
动画结束状态（默认结束状态在起点backwards） */
animation: move 1s linear 2s infinite;
/* 注意点1：infinite循环次数和方向alternate反向执行一搭配使用 */
/* animation: move 2s linear 2s infinite alternate; */
/* 注意点2：infinite循环次数，方向alternate反向执行无法和结束状态一起使用 */
/* animation: move 1s alternate forwards; */
/* animation: move 2s forwards; */
三. 逐帧动画
animation-timing-function: steps(N)；
将动画过程等分成N份
四. 鼠标经过暂停动画
/* 鼠标经过box， 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
五. 多组动画
animation: 动画1, 动画2, ... 动画n
animation: run 0.5s steps(12) infinite,move 2s forwards;
transition: all 2s;
/* 注意点：动画可以定义多个，多个动画可以同时使用，记得使用逗号隔开 */
