Web移动端学习第二天

今天是学习web移动端的第二天，学习的主要内容分为3D空间转换与动画两个大部分。接下来我将一步一步将我今天学习的内容进行复盘。

一、3D空间转换

1、3D坐标系

说明： 3D坐标系比2D多了一个Z轴 如下图：

注意：   1、X 轴 往右越大，是正值， 否则反之
         2、Y 轴 往下越大，是正值，否则反之
         3、Z轴 （指向我们）越大，是正值，否则反之

2、3D位移

语法：

transform: translate3d(x, y, z);

但是在大多数的情况中，我们还是喜欢将他们分开写：

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

3、透视

特点：空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法：

 perspective: 800px; //取值范围一般在800px~1200px之间

注意事项：1、此代码一定给父亲元素 2、透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。（ 其中 d 为透视的距离，值越小距离越近，值越大距离越远 z 是 translateZ 的距离， 这个距离靠近我们，盒子越大。值越大，盒子越近）如下图：

4、3D旋转

前引：因为有了透视的原因，所以我们进行3D旋转效果时可以更加清楚地看到变化效果

1.rotateX

说明：沿着X轴旋转，类似单杠的旋转，可以自行脑补

语法：

transform: rotateX(360deg);

2.rotateY

说明：沿着Y轴旋转，类似钢管舞

语法：

transform: rotateY(360deg);

5、左手法则

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

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

rotateY： 大拇指指向Z轴正向方（大拇指指向我们自己）， 则四指指向的方向是旋转的方向

6、立体呈现

说明：让子盒子在父盒子内有空间的展示，也可以理解为子元素真正意义上实现了3D立体

语法：

 transform-style: preserve-3d;

注意：代码必须给父元素加

7、空间旋转

作用：用来设置自定义旋转轴的位置以及角度

语法：

 transform:rotate3d(x, y, z, 角度度数) //x、y、z为0或1

8、空间缩放

作用：顾名思义，实现在3D状态下的子元素的放大或缩小

语法：

1、transform: scaleX(倍数);
2、transform: scaleY(倍数);
3、transform: scaleZ(倍数);
4、transform: scale3d(x, y, z);

二、动画

特点：动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。与transition: ; 有区别

语法：

   1、 @keyframes 定义动画名称 {
    form{
    
    }
      to {

      }
    }
    
    2、 @keyframes 定义动画名称 {
      10%{
    
    }
      20% {

      }
      30%{
      
      }
      ...
    }

调用方法：animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态

注意：动画名称和动画时间必须有

1、动画名字：动画名字参照css类选择器命名

2、动画时长和延迟时间别忘了带单位 s

3、有两个时间单位则第二个为延迟时间（何时开始）

4、infinate 无限循环动画（也可以为数字，数字为几就重复几次）

5、动画方向：alternate 为反向 就是左右来回执行动画（跑马灯）

6、执行完毕状态：

• 1.forwards 动画结束停留在最后一帧状态
• 2.backwards 动画结束回到开始状态

7、速度曲线：

• 1.linear 让动画匀速执行
• 2.ease 慢块慢
• 3.ease-in 以低速开始
• 4.ease-out 以低速结束
• 5.ease-in-out 以低速开始和结束
• 6.steps（数字） 逐帧运动，有几步完成，数字就填几

鼠标经过暂停动画：

语法：

 animation-play-state: paused;

多组动画：

注意：多组动画由逗号隔开

语法：

animation: run 1s steps(12) infinite, move 5s linear forwards;

今天的学习内容就是这么多，第一次写这个，还需进步，也希望大加能够不吝啬的多给点意见！下期再见。