移动端布局

12.27
(一)空间转换3D
1.3D 坐标系比2D 多了一个Z轴。
一定要记住3个坐标轴取值的正反：
X 轴 往右越大，是正值， 否则反之
Y 轴 往下越大，是正值，否则反之
Z轴 （指向我们）越大，是正值，否则反之
完整写法: transform: translate3d(x, y, z);
2.透视
透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果
透视注意事项：
1.取值范围经常在 800px ~ 1200px 之间。
2.一定给父亲添加
3.透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
其中 d 为透视的距离
3.z 是 translateZ 的距离， 这个距离靠近我们，盒子越大
(二)旋转3D
注意:默认的旋转中心在盒子的中心位置
左手规则：
大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的正方向
大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的正方向
让子盒子在父盒子内有空间的展示，此时可以给父亲添加:transform-style: preserve-3d;
动画
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
动画使用分为定义和调用：
1.定义:
/* 1. 定义的动画 */
@keyframes dance {

from {
    transform: scale(1)
}

to {
    transform: scale(1.5)
}

}或者是
/* 1. 定义的动画 */
@keyframes dance {

   0% {
    transform: scale(1)
  } 

  100% {
    transform: scale(1.5)
  }
}

2.调用
img {
width: 200px;
/* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/
animation: dance .5s infinite;
}

动画属性
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
1.动画名字参照css类选择器命名
2.动画时长和延迟时间别忘了带单位 s
3.infinate 无限循环动画
4.alternate 为反向 就是左右来回执行动画（跑马灯）
5.forwards 动画结束停留在最后一帧状态
6.linear 让动画匀速执行
鼠标经过暂停动画
/* 鼠标经过box， 则 ul 停止动画 /
.box:hover ul {
animation-play-state: paused;
}
多组动画:
/ 我们想要2个动画一起执行 animation: 动画1, 动画2, … 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;
在动画中,有一个属性值是steps(帧数) 表示逐帧动画 一般在背景图的位置移动时常使用
在走马灯特效下的可视窗口盒子 给动画之后会有留白 出现这种情况时可以复制粘贴几个在可视窗口盒子下的元素 让动画进行移动时不留白
单词汇总
perspective:;表示透视效果 近大远小 近实远虚 一般给需要进行3D转换盒子的父元素进行添加 让立体效果更明显
transform-style: preserve-3d; 表示立体呈现 一般给需要3D转换盒子的父元素进行添加 让立体效果更明显
@keyframes 动画声明 表示动画元素 在后面加上动画名来进行调用即可
infinate 表示无限循环动画 在animation属性里面添加
alternate 表示动画为反向 就是左右来回执行动画（跑马灯）在animation属性里面添加
forwards 表示动画结束停留在最后一帧状态 在animation属性里面添加
linear 表示让动画匀速执行 在animation属性里面添加
animation 表示动画的调用 一般后面的属性必写动画名 配合动画使用
animation-play-state: paused; 表示动画的暂停 一般配合hover使用 达到鼠标经过动画暂停的效果