移动web前端基础知识二(部分)

一、空间转换 3D

3D坐标系

3D 坐标系比2D 多了一个Z轴如图:

 

• X 轴 往右越大，是正值， 否则反之

• Y 轴 往下越大，是正值，否则反之

• Z轴 （指向我们）越大，是正值，否则反之

2.3D位移

完整写法:transform: translate3d(x, y, z);

分开写:

• transform: translateX(100px);
• transform: translateY(100px);
• transform: translateZ(100px);

3.透视 perspective

• 透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果
• 一定给父亲添加
• 取值范围经常在 800px ~ 1200px 之间
• z 是 translateZ 的距离， 这个距离靠近我们，盒子越大,单位px

4. 3D旋转

4.1 rotateX默认旋转中心在盒子的中心位置围绕x轴旋转单位是deg,需要加过渡效果才能显示

4.2 rotateY默认旋转中心在盒子的中心位置围绕y轴旋转单位是deg,需要加过渡效果才能显示

5.左手法则

1.大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向

2.大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向

 

6.立体呈现 transform-style: preserve-3d;

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

二.动画（重点）

特点:动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画

1.定义动画@keyframes dance{} dance是动画名称自己可以取不是固定的,需要靠animation: 动画名称 执行时间;这两属性是必须要添加的,动画可以多个同时执行